Implementation of Android snow Animation

Implementation of Android snow Animation

This is a pleasant season! Because this article was published on Christmas Day of 2015, we need to create a holiday atmosphere for Style Android. Thanks to the readers, some may not celebrate Christmas, and some may be in February.
So the question is, what should we do to make this holiday look like a real holiday? The easiest way: take a photo with a Christmas hat.

However, I feel that this image is monotonous, so I need to make some snowflake and let the snowflake float down.
We can add a custom View containing this image.

Res/layout/activity_main.xml

<code class="hljs xml"><!--{cke_protected}{C}%3C!%2D%2D%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%2D%2D%3E--><relativelayout android:layout_height="match_parent" android:layout_width="match_parent" tools:context="com.stylingandroid.snowfall.MainActivity" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">  <imageview android:contentdescription="@null" android:id="@+id/image" android:layout_centerinparent="true" android:layout_height="match_parent" android:layout_width="match_parent" android:scaletype="fitCenter" android:src="@drawable/tree">  <com.stylingandroid.snowfall.snowview 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" android:layout_height="match_parent" android:layout_width="match_parent"></com.stylingandroid.snowfall.snowview></imageview></relativelayout></code>

Although the custom View can be implemented by inheriting the ImageView, I decidedSnowViewSeparate from the image, so you do not need to re-render the image every time you refresh the animation, just refreshSnowViewThat's all.

SnowView.java

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();        }    };}

The code is simple. In the ViewonSizeChangedMethod. InonDrawIn the method, draw a snowflake and refresh the location at intervals. Note thatonDrawInstead of executing it immediately, you can create a runnable to avoid blocking the UI thread.
Snowflake fall is an algorithm based on Samuel Arbesman.

SnowFlake. java

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 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);    }}

During initialization, the random position of the snowflake has been determined. This is to ensure that the snowflake is not at the starting position every time it is painted. When the position of a snowflake exceeds the boundary of the Canvas, it is retained to a random position on the top, so that it can be recycled to avoid repeated creation.
When painting the falling frame of a snowflake, we first giveSnowFlakeAdd a random number to change the position, which can be used to imitate the snowflake.
Before painting the Snowflake on the canvas, we will perform the border check (if necessary, the ones that exceed the border will be placed on the top again)

I have been constantly adjusting the constants in it to change the snow effect until I feel satisfied.

Of course, inserting so many things in the canvas is not a good method (there are other better ones such as OpenGL), but now I am going to eat turkey, so I may have to wait for the next time.