Android 仿下雪效果
阿新 • • 發佈:2019-01-28
轉載請說明出處
最近在做公司新產品的設計,想到下雪效果設計加入到專案應該挺不錯的,所以我們想將這個設計理念加入到我們的產品中。
下面是效果圖:
沒擷取動態圖
XML 程式碼:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_snow" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:background="#f221f5" tools:context="com.dzz.android191_ui_touch.SnowActivity"> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" > <com.dzz.android191_ui_touch.SnowView android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="10dp"/> </FrameLayout> </RelativeLayout>
Java程式碼
新建一個activity SnowView
package com.dzz.android191_ui_touch; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.util.AttributeSet; import android.view.View; /** * Created by ASUS on 2017-01-18. */ public class SnowView extends View { private static final int NUM_SNOWFLAKES = 100; private static final int DELAY = 5; private SnowFlake[] snowflakes; public SnowView(Context context) { super(context); } public SnowView(Context context, AttributeSet attrs) { super(context, attrs); } public SnowView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } protected void resize(int width, int height) { Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); paint.setColor(Color.WHITE); paint.setStyle(Paint.Style.FILL); snowflakes = new SnowFlake[NUM_SNOWFLAKES]; for (int i = 0; i < NUM_SNOWFLAKES; i++) { snowflakes[i] = SnowFlake.create(width, height, paint); } } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); if (w != oldw || h != oldh) { resize(w, h); } } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); for (SnowFlake snowFlake : snowflakes) { snowFlake.draw(canvas); } getHandler().postDelayed(runnable, DELAY); } private Runnable runnable = new Runnable() { @Override public void run() { invalidate(); } }; }
還要 新建一個activity SnowFlake
package com.dzz.android191_ui_touch; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Point; /** * Created by ASUS on 2017-01-18. */ public class SnowFlake { // 雪花的角度 private static final float ANGE_RANGE = 0.1f; // 角度範圍 private static final float HALF_ANGLE_RANGE = ANGE_RANGE / 2f; // 一般的角度 private static final float HALF_PI = (float) Math.PI / 2f; // 半PI private static final float ANGLE_SEED = 25f; // 角度隨機種子 private static final float ANGLE_DIVISOR = 10000f; // 雪花的移動速度 private static final float INCREMENT_LOWER = 2f; private static final float INCREMENT_UPPER = 4f; // 雪花的大小 private static final float FLAKE_SIZE_LOWER = 7f; private static final float FLAKE_SIZE_UPPER = 20f; private final RandomGenerator mRandom; // 隨機控制器 private final Point mPosition; // 雪花位置 private float mAngle; // 角度 private final float mIncrement; // 雪花的速度 private final float mFlakeSize; // 雪花的大小 private final Paint mPaint; // 畫筆 private SnowFlake(RandomGenerator random, Point position, float angle, float increment, float flakeSize, Paint paint) { mRandom = random; mPosition = position; mIncrement = increment; mFlakeSize = flakeSize; mPaint = paint; mAngle = angle; } public static SnowFlake create(int width, int height, Paint paint) { RandomGenerator random = new RandomGenerator(); int x = random.getRandom(width); int y = random.getRandom(height); Point position = new Point(x, y); float angle = random.getRandom(ANGLE_SEED) / ANGLE_SEED * ANGE_RANGE + HALF_PI - HALF_ANGLE_RANGE; float increment = random.getRandom(INCREMENT_LOWER, INCREMENT_UPPER); float flakeSize = random.getRandom(FLAKE_SIZE_LOWER, FLAKE_SIZE_UPPER); return new SnowFlake(random, position, angle, increment, flakeSize, paint); } // 繪製雪花 public void draw(Canvas canvas) { int width = canvas.getWidth(); int height = canvas.getHeight(); move(width, height); canvas.drawCircle(mPosition.x, mPosition.y, mFlakeSize, mPaint); } // 移動雪花 private void move(int width, int height) { //x水平方向,那麼需要晃動,主要設定這個值就可以,現在取消晃動了 //如果 mPosition.x不加上後面那個值,就不會晃動了 double x = mPosition.x + (mIncrement * Math.cos(mAngle)); //y是豎直方向,就是下落 double y = mPosition.y + (mIncrement * Math.sin(mAngle)); mAngle += mRandom.getRandom(-ANGLE_SEED, ANGLE_SEED) / ANGLE_DIVISOR; //這個是設定雪花位置,如果在很短時間內重新整理一次,就是連起來的動畫效果 mPosition.set((int) x, (int) y); // 移除螢幕, 重新開始 if (!isInside(width, height)) { // 重置雪花 reset(width); } } // 判斷是否在其中 private boolean isInside(int width, int height) { int x = mPosition.x; int y = mPosition.y; return x > mFlakeSize -5 && x + mFlakeSize <= width && y >= -mFlakeSize - 1 && y - mFlakeSize < height; } // 重置雪花 private void reset(int width) { mPosition.x = mRandom.getRandom(width); mPosition.y = (int) (-mFlakeSize - 1); // 最上面 mAngle = mRandom.getRandom(ANGLE_SEED) / ANGLE_SEED * ANGE_RANGE + HALF_PI - HALF_ANGLE_RANGE; } }