Android 實現漫天飛舞雪花以及下雨天的效果

　　前言：

　　這個效果實現的原作者是國外一位大神。我在其基礎上測試，以及在代碼上加了不少注釋，以及局部修改。後面我有根據漫天飛舞雪花，實現下雨天場景的效果。原作者項目還是android studio版本的。我改成eclipse android 版本。

　　英文原文地址：https://blog.stylingandroid.com/snowfall/

　　中文翻譯地址：http://www.open-open.com/lib/view/open1452263908573.html

　　國外大神實現效果youtube視頻地址：https://www.youtube.com/watch?v=pk66ZziTfOw

　　中文翻譯是open開發者經驗庫一位作者翻譯，翻譯的很好。在那篇文章也能看到實現的最原始的效果。

　　實現漫天飛舞的雪花下載地址：http://download.csdn.net/detail/qq_16064871/9420804

　　實現下雨天效果的下載地址：http://download.csdn.net/detail/qq_16064871/9420808

　　1、漫天飛舞的雪花主要代碼

　　SnowView

1. import android.content.Context;    
2. import android.graphics.Canvas;    
3. import android.graphics.Color;    
4. import android.graphics.Paint;    
5. import android.util.AttributeSet;    
6. import android.view.View;    
7.     
8. /**  
9.  * 雪花視圖, DELAY時間重繪, 繪制NUM_SNOWFLAKES個雪花  
10.  */    
11. public class SnowView extends View {    
12.     
13.     private static final int NUM_SNOWFLAKES = 150; // 雪花數量    
14.     private static final int DELAY = 5; // 延遲    
15.     private SnowFlake[] mSnowFlakes; // 雪花    
16.     
17.     public SnowView(Context context) {    
18.         super(context);    
19.     }    
20.     
21.     public SnowView(Context context, AttributeSet attrs) {    
22.         super(context, attrs);    
23.     }    
24.     
25.     public SnowView(Context context, AttributeSet attrs, int defStyleAttr) {    
26.         super(context, attrs, defStyleAttr);    
27.     }    
28.     
29.     @Override     
30.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {    
31.         super.onSizeChanged(w, h, oldw, oldh);    
32.         if (w != oldw || h != oldh) {    
33.             initSnow(w, h);    
34.         }    
35.     }    
36.     
37.     private void initSnow(int width, int height) {    
38.         Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); // 抗鋸齒    
39.         paint.setColor(Color.WHITE); // 白色雪花    
40.         paint.setStyle(Paint.Style.FILL); // 填充;    
41.         mSnowFlakes = new SnowFlake[NUM_SNOWFLAKES];    
42.         //mSnowFlakes所有的雪花都生成放到這裡面    
43.         for (int i = 0; i < NUM_SNOWFLAKES; ++i) {    
44.             mSnowFlakes[i] = SnowFlake.create(width, height, paint);    
45.         }    
46.     }    
47.     
48.     @Override     
49.     protected void onDraw(Canvas canvas) {    
50.         super.onDraw(canvas);    
51.         //for返回SnowFlake    
52.         for (SnowFlake s : mSnowFlakes) {    
53.             //然後進行繪制    
54.             s.draw(canvas);    
55.         }    
56.         // 隔一段時間重繪一次, 動畫效果    
57.         getHandler().postDelayed(runnable, DELAY);    
58.     }    
59.     
60.     // 重繪線程    
61.     private Runnable runnable = new Runnable() {    
62.         @Override    
63.         public void run() {    
64.             //自動刷新    
65.             invalidate();    
66.         }    
67.     };    
68. }    

　　SnowFlake

1. package com.example.snowflake.view;    
2.     
3. import com.example.snowflake.RandomGenerator;    
4.     
5. import android.graphics.Canvas;    
6. import android.graphics.Paint;    
7. import android.graphics.Point;    
8.     
9. /**  
10.  * 雪花的類, 移動, 移出屏幕會重新設置位置.  
11.  */    
12. public class SnowFlake {    
13.     // 雪花的角度    
14.     private static final float ANGE_RANGE = 0.1f; // 角度范圍    
15.     private static final float HALF_ANGLE_RANGE = ANGE_RANGE / 2f; // 一般的角度    
16.     private static final float HALF_PI = (float) Math.PI / 2f; // 半PI    
17.     private static final float ANGLE_SEED = 25f; // 角度隨機種子    
18.     private static final float ANGLE_DIVISOR = 10000f;    
19.     // 雪花的移動速度    
20.     private static final float INCREMENT_LOWER = 2f;    
21.     private static final float INCREMENT_UPPER = 4f;    
22.     
23.     // 雪花的大小    
24.     private static final float FLAKE_SIZE_LOWER = 7f;    
25.     private static final float FLAKE_SIZE_UPPER = 20f;    
26.     
27.     private final RandomGenerator mRandom; // 隨機控制器    
28.     private final Point mPosition; // 雪花位置    
29.     private float mAngle; // 角度    
30.     private final float mIncrement; // 雪花的速度    
31.     private final float mFlakeSize; // 雪花的大小    
32.     private final Paint mPaint; // 畫筆    
33.     
34.     private SnowFlake(RandomGenerator random, Point position, float angle, float increment, float flakeSize, Paint paint) {    
35.         mRandom = random;    
36.         mPosition = position;    
37.         mIncrement = increment;    
38.         mFlakeSize = flakeSize;    
39.         mPaint = paint;    
40.         mAngle = angle;    
41.     }    
42.     
43.     public static SnowFlake create(int width, int height, Paint paint) {    
44.         RandomGenerator random = new RandomGenerator();    
45.         int x = random.getRandom(width);    
46.         int y = random.getRandom(height);    
47.         Point position = new Point(x, y);    
48.         float angle = random.getRandom(ANGLE_SEED) / ANGLE_SEED * ANGE_RANGE + HALF_PI - HALF_ANGLE_RANGE;    
49.         float increment = random.getRandom(INCREMENT_LOWER, INCREMENT_UPPER);    
50.         float flakeSize = random.getRandom(FLAKE_SIZE_LOWER, FLAKE_SIZE_UPPER);    
51.         return new SnowFlake(random, position, angle, increment, flakeSize, paint);    
52.     }    
53.     
54.     // 繪制雪花    
55.     public void draw(Canvas canvas) {    
56.         int width = canvas.getWidth();    
57.         int height = canvas.getHeight();    
58.         move(width, height);    
59.         canvas.drawCircle(mPosition.x, mPosition.y, mFlakeSize, mPaint);    
60.     }    
61.     
62.     // 移動雪花    
63.     private void move(int width, int height) {    
64.         //x水平方向，那麼需要晃動，主要設置這個值就可以，現在取消晃動了    
65.         //如果 mPosition.x不加上後面那個值，就不會晃動了    
66.         double x = mPosition.x + (mIncrement * Math.cos(mAngle));    
67.         //y是豎直方向，就是下落    
68.         double y = mPosition.y + (mIncrement * Math.sin(mAngle));    
69.      
70.         mAngle += mRandom.getRandom(-ANGLE_SEED, ANGLE_SEED) / ANGLE_DIVISOR;    
71.         //這個是設置雪花位置，如果在很短時間內刷新一次，就是連起來的動畫效果    
72.         mPosition.set((int) x, (int) y);    
73.     
74.         // 移除屏幕, 重新開始    
75.         if (!isInside(width, height)) {    
76.             // 重置雪花    
77.             reset(width);    
78.         }    
79.     }    
80.         
81.     // 判斷是否在其中    
82.     private boolean isInside(int width, int height) {    
83.         int x = mPosition.x;    
84.         int y = mPosition.y;    
85.         return x > mFlakeSize -5 && x + mFlakeSize <= width && y >= -mFlakeSize - 1 && y - mFlakeSize < height;    
86.     }    
87.     
88.     // 重置雪花    
89.     private void reset(int width) {    
90.         mPosition.x = mRandom.getRandom(width);    
91.         mPosition.y = (int) (-mFlakeSize - 1); // 最上面    
92.         mAngle = mRandom.getRandom(ANGLE_SEED) / ANGLE_SEED * ANGE_RANGE + HALF_PI - HALF_ANGLE_RANGE;    
93.     }    
94. }    

　　2、實現下雨天效果代碼

　　RainView

1. package com.example.raindrop.view;    
2.     
3. import com.example.raindrop.R;    
4.     
5. import android.content.Context;    
6. import android.graphics.Canvas;    
7. import android.graphics.Paint;    
8. import android.util.AttributeSet;    
9. import android.view.View;    
10.     
11. /**  
12.  * 雨滴視圖, DELAY時間重繪, 繪制NUM_SNOWFLAKES個雨滴  
13.  */    
14. public class RainView extends View {    
15.     
16.     private static final int NUM_SNOWFLAKES = 150; // 雨滴數量    
17.     private static final int DELAY = 5; // 延遲    
18.     private RainFlake[] mSnowFlakes; // 雨滴    
19.     
20.     public RainView(Context context) {    
21.         super(context);    
22.     }    
23.     
24.     public RainView(Context context, AttributeSet attrs) {    
25.         super(context, attrs);    
26.     }    
27.     
28.     public RainView(Context context, AttributeSet attrs, int defStyleAttr) {    
29.         super(context, attrs, defStyleAttr);    
30.     }    
31.     
32.     @Override     
33.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {    
34.         super.onSizeChanged(w, h, oldw, oldh);    
35.         if (w != oldw || h != oldh) {    
36.             initSnow(w, h);    
37.         }    
38.     }    
39.     
40.     private void initSnow(int width, int height) {    
41.         Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); // 抗鋸齒    
42.         paint.setColor(getResources().getColor(R.color.colorWater)); // 雨滴的顏色    
43.         paint.setStyle(Paint.Style.FILL); // 填充;    
44.         mSnowFlakes = new RainFlake[NUM_SNOWFLAKES];    
45.         //mSnowFlakes所有的雨滴都生成放到這裡面    
46.         for (int i = 0; i < NUM_SNOWFLAKES; ++i) {    
47.             mSnowFlakes[i] = RainFlake.create(width, height, paint);    
48.         }    
49.     }    
50.     
51.     @Override     
52.     protected void onDraw(Canvas canvas) {    
53.         super.onDraw(canvas);    
54.         //for返回SnowFlake    
55.         for (RainFlake s : mSnowFlakes) {    
56.             //然後進行繪制    
57.             s.draw(canvas);    
58.         }    
59.         // 隔一段時間重繪一次, 動畫效果    
60.         getHandler().postDelayed(runnable, DELAY);    
61.     }    
62.     
63.     // 重繪線程    
64.     private Runnable runnable = new Runnable() {    
65.         @Override    
66.         public void run() {    
67.             //自動刷新    
68.             invalidate();    
69.         }    
70.     };    
71. }    

　　RainFlake

1. package com.example.raindrop.view;    
2.     
3. import com.example.raindrop.RandomGenerator;    
4.     
5. import android.graphics.Canvas;    
6. import android.graphics.Paint;    
7.     
8. /**  
9.  * 雨滴的類, 移動, 移出屏幕會重新設置位置.  
10.  */    
11. public class RainFlake {    
12.     
13.     // 雨滴的移動速度    
14.     private static final float INCREMENT_LOWER = 6f;    
15.     private static final float INCREMENT_UPPER = 8f;    
16.     
17.     // 雨滴的大小    
18.     private static final float FLAKE_SIZE_LOWER = 2f;    
19.     private static final float FLAKE_SIZE_UPPER = 5f;    
20.     
21.     private final float mIncrement; // 雨滴的速度    
22.     private final float mFlakeSize; // 雨滴的大小    
23.     private final Paint mPaint; // 畫筆    
24.         
25.     private Line mLine; // 雨滴    
26.         
27.     private RandomGenerator mRandom;    
28.     
29.     private RainFlake(RandomGenerator random,Line line, float increment, float flakeSize, Paint paint) {    
30.         mRandom = random;    
31.         mLine = line;    
32.         mIncrement = increment;    
33.         mFlakeSize = flakeSize;    
34.         mPaint = paint;    
35.     }    
36.     
37.     //生成雨滴    
38.     public static RainFlake create(int width, int height, Paint paint) {    
39.         RandomGenerator random = new RandomGenerator();    
40.         int [] nline;    
41.         nline = random.getLine(width, height);    
42.             
43.         Line line = new Line(nline[0], nline[1], nline[2], nline[3]);    
44.         float increment = random.getRandom(INCREMENT_LOWER, INCREMENT_UPPER);    
45.         float flakeSize = random.getRandom(FLAKE_SIZE_LOWER, FLAKE_SIZE_UPPER);    
46.         return new RainFlake(random,line, increment, flakeSize, paint);    
47.     }    
48.     
49.     // 繪制雨滴    
50.     public void draw(Canvas canvas) {    
51.         int width = canvas.getWidth();    
52.         int height = canvas.getHeight();    
53.         drawLine(canvas, width, height);    
54.     }    
55.     
56.     /**  
57.      * 改成線條，類似於雨滴效果  
58.      * @param canvas  
59.      * @param width  
60.      * @param height  
61.      */    
62.     private void drawLine(Canvas canvas, int width, int height) {    
63.         //設置線寬    
64.       mPaint.setStrokeWidth(mFlakeSize);    
65.         //y是豎直方向，就是下落    
66.       double y1 = mLine.y1 + (mIncrement * Math.sin(1.5));    
67.       double y2 = mLine.y2 + (mIncrement * Math.sin(1.5));    
68.     
69.       //這個是設置雨滴位置，如果在很短時間內刷新一次，就是連起來的動畫效果    
70.        mLine.set(mLine.x1,(int) y1,mLine.x2 ,(int) y2);    
71.             
72.         if (!isInsideLine(height)) {    
73.             resetLine(width,height);    
74.         }    
75.             
76.         canvas.drawLine(mLine.x1, mLine.y1, mLine.x2, mLine.y2, mPaint);    
77.     }    
78.         
79.     // 判斷是否在其中    
80.     private boolean isInsideLine(int height) {    
81.         return mLine.y1 < height && mLine.y2 < height;    
82.     }    
83.     
84.     // 重置雨滴    
85.     private void resetLine(int width, int height) {    
86.         int [] nline;    
87.         nline = mRandom.getLine(width, height);    
88.         mLine.x1 = nline[0];    
89.         mLine.y1 = nline[1];    
90.         mLine.x2 = nline[2];    
91.         mLine.y2 = nline[3];    
92.     }    
93.     
94. }    

　　3、效果圖

　　在這裡我說一下為什麼是沒有gif效果圖，android手機錄制屏幕太太麻煩了，還要轉為gif。以前我是用騰訊應用寶截圖做成gif效果圖。但是這次效果不好我就直接截圖了。

　　需要看動畫效果，下載我demo。或者去中文翻譯那片文章也有效果圖。

　　還有各位有什麼推薦工具，關於android 機器錄制gif工具或者軟件。