Android下雪动画

• 原文链接 : Snowfall
• 原文作者 : Styling Android
• 译文出自 : hanks.xyz
• 译者 : hanks-zyh
• 校对者: desmond1121
• 状态 : 完成

看我多么欢乐！

但是我感觉这个图片有些单调，所以来弄点雪花，让雪花飘下来。

我们可以添加一个包含这个图片的自定义View

<?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:layout_width="match_parent"   android:layout_height="match_parent"   tools:context="com.stylingandroid.snowfall.MainActivity">    <ImageView     android:id="@+id/image"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:layout_centerInParent="true"     android:contentDescription="@null"     android:scaleType="fitCenter"     android:src="@drawable/tree" />    <com.stylingandroid.snowfall.SnowView     android:layout_width="match_parent"     android:layout_height="match_parent"     android:layout_alignBottom="@id/image"     android:layout_alignEnd="@id/image"     android:layout_alignLeft="@id/image"     android:layout_alignRight="@id/image"     android:layout_alignStart="@id/image"     android:layout_alignTop="@id/image" /> </RelativeLayout>

<?xmlversion="1.0" encoding="utf-8"?> <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"   xmlns:tools="http://schemas.android.com/tools"   android:layout_width="match_parent"   android:layout_height="match_parent"   tools:context="com.stylingandroid.snowfall.MainActivity">     <ImageView     android:id="@+id/image"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:layout_centerInParent="true"     android:contentDescription="@null"     android:scaleType="fitCenter"     android:src="@drawable/tree" />     <com.stylingandroid.snowfall.SnowView     android:layout_width="match_parent"     android:layout_height="match_parent"     android:layout_alignBottom="@id/image"     android:layout_alignEnd="@id/image"     android:layout_alignLeft="@id/image"     android:layout_alignRight="@id/image"     android:layout_alignStart="@id/image"     android:layout_alignTop="@id/image" /> </RelativeLayout>   

public class SnowView extends View {     private static final int NUM_SNOWFLAKES = 150;     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();         }     }; }

public class SnowView extends View {     private static final int NUM_SNOWFLAKES = 150;     private static final int DELAY = 5;       private SnowFlake[] snowflakes;       public SnowView(Contextcontext) {         super(context);     }       public SnowView(Contextcontext, AttributeSetattrs) {         super(context, attrs);     }       public SnowView(Contextcontext, AttributeSetattrs, int defStyleAttr) {         super(context, attrs, defStyleAttr);     }       protected void resize(int width, int height) {         Paintpaint = 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(Canvascanvas) {         super.onDraw(canvas);         for (SnowFlakesnowFlake : snowflakes) {             snowFlake.draw(canvas);         }         getHandler().postDelayed(runnable, DELAY);     }       private Runnablerunnable = new Runnable() {         @Override         public void run() {             invalidate();         }     }; }   

代码很简单。 在View 的 onSizeChanged 方法中初始化 150 个随机位置的雪花对象。 在 onDraw 方法中画出雪花，然后每隔一段时间就刷新一下位置，需要注意的是 onDraw 没有立即去执行，而是通过创建一个runnable，这样不会阻塞UI线程

雪花下落是基于Samuel Arbesman的 雪花下落的算法 。

private final Random random; private final Point position; private float angle; private final float increment; private final float flakeSize; private final Paint paint;  public static SnowFlake create(int width, int height, Paint paint) {     Random random = new Random();     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); }  SnowFlake(Random random, Point position, float angle, float increment, float flakeSize, Paint paint) {     this.random = random;     this.position = position;     this.angle = angle;     this.increment = increment;     this.flakeSize = flakeSize;     this.paint = paint; }  private void move(int width, int height) {     double x = position.x + (increment * Math.cos(angle));     double y = position.y + (increment * Math.sin(angle));      angle += random.getRandom(-ANGLE_SEED, ANGLE_SEED) / ANGLE_DIVISOR;      position.set((int) x, (int) y);      if (!isInside(width, height)) {         reset(width);     } }  private boolean isInside(int width, int height) {     int x = position.x;     int y = position.y;     return x >= -flakeSize - 1 && x + flakeSize <= width && y >= -flakeSize - 1 && y - flakeSize < height; }  private void reset(int width) {     position.x = random.getRandom(width);     position.y = (int) (-flakeSize - 1);     angle = random.getRandom(ANGLE_SEED) / ANGLE_SEED * ANGE_RANGE + HALF_PI - HALF_ANGLE_RANGE; }  public void draw(Canvas canvas) {     int width = canvas.getWidth();     int height = canvas.getHeight();     move(width, height);     canvas.drawCircle(position.x, position.y, flakeSize, paint); }

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;     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 Randomrandom;     private final Pointposition;     private float angle;     private final float increment;     private final float flakeSize;     private final Paintpaint;       public static SnowFlakecreate(int width, int height, Paintpaint) {         Randomrandom = new Random();         int x = random.getRandom(width);         int y = random.getRandom(height);         Pointposition = 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);     }       SnowFlake(Randomrandom, Pointposition, float angle, float increment, float flakeSize, Paintpaint) {         this.random = random;         this.position = position;         this.angle = angle;         this.increment = increment;         this.flakeSize = flakeSize;         this.paint = paint;     }       private void move(int width, int height) {         double x = position.x + (increment * Math.cos(angle));         double y = position.y + (increment * Math.sin(angle));           angle += random.getRandom(-ANGLE_SEED, ANGLE_SEED) / ANGLE_DIVISOR;           position.set((int) x, (int) y);           if (!isInside(width, height)) {             reset(width);         }     }       private boolean isInside(int width, int height) {         int x = position.x;         int y = position.y;         return x >= -flakeSize - 1 && x + flakeSize <= width && y >= -flakeSize - 1 && y - flakeSize < height;     }       private void reset(int width) {         position.x = random.getRandom(width);         position.y = (int) (-flakeSize - 1);         angle = random.getRandom(ANGLE_SEED) / ANGLE_SEED * ANGE_RANGE + HALF_PI - HALF_ANGLE_RANGE;     }       public void draw(Canvascanvas) {         int width = canvas.getWidth();         int height = canvas.getHeight();         move(width, height);         canvas.drawCircle(position.x, position.y, flakeSize, paint);     } }   

初始化的时候，雪花的随机位置就已经确定了。这是为了确保雪花不会每次画的时候都在开始的位置。当一个雪花的位置超出Canvas的边界之后，它就会被重新放到顶部的一个随机位置，这样就可以循环利用了，避免了重复创建。

当画雪花下落的每一帧的时候，我们首先给 SnowFlake 添加一个随机数来改变位置，这样可以模仿有小风吹雪花。

在把雪花画到canvas上之前，我们会进行边界检查(如果需要的话，超出边界的就重新放到顶部)

最终效果如下：

版权声明：

Part of this code is based upon “Snowfall” by Sam Arbesman, licensed under Creative Commons Attribution-Share Alike 3.0 and GNU GPL license.

Work: http://openprocessing.org/visuals/?visualID= 84771

License:

http://creativecommons.org/licenses/by-sa/3.0/

http://creativecommons.org/licenses/GPL/2.0/