Android 炫舞漫天飛雪效果圖
今天周日,不適合出門(mén),太冷了,俗說(shuō):一九二九不出手,三九四九零來(lái)走。。
我們的應(yīng)用也可以有一些冬天的效果, 教大家做一個(gè)下雪的動(dòng)畫(huà)效果, 參考.
主要
(1) 隱藏status bar, 全屏顯示圖片.
(2) 繪制多個(gè)點(diǎn), 實(shí)現(xiàn)移動(dòng)效果.
(3) 回收點(diǎn), 避免重復(fù)創(chuàng)建.
我喜歡用注釋說(shuō)話(huà), 請(qǐng)大家多關(guān)注代碼中的注釋.
Github下載地址
1. 雪花類(lèi)
雪花的屬性包含: 隨機(jī)量, 位置, 增量, 大小, 角度, 畫(huà)筆.
繪畫(huà)的過(guò)程中, 使用角度會(huì)移動(dòng)點(diǎn)的位置, 每次速率都不同.
當(dāng)雪花移出屏幕時(shí), 會(huì)重新使用, 在屏幕的頂端重新落下.
算法參考.
/** * 雪花的類(lèi), 移動(dòng), 移出屏幕會(huì)重新設(shè)置位置. * <p/> * Created by wangchenlong on 16/1/24. */ 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; // 角度隨機(jī)種子 private static final float ANGLE_DIVISOR = 10000f; // 角度的分母 // 雪花的移動(dòng)速度 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; // 隨機(jī)控制器 private final Point mPosition; // 雪花位置 private float mAngle; // 角度 private final float mIncrement; // 雪花的速度 private final float mFlakeSize; // 雪花的大小 private final Paint mPaint; // 畫(huà)筆 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); } // 移動(dòng)雪花 private void move(int width, int height) { double x = mPosition.x + (mIncrement * Math.cos(mAngle)); double y = mPosition.y + (mIncrement * Math.sin(mAngle)); mAngle += mRandom.getRandom(-ANGLE_SEED, ANGLE_SEED) / ANGLE_DIVISOR; // 隨機(jī)晃動(dòng) mPosition.set((int) x, (int) y); // 移除屏幕, 重新開(kāi)始 if (!isInside(width, height)) { reset(width); } } // 判斷是否在其中 private boolean isInside(int width, int height) { int x = mPosition.x; int y = mPosition.y; return x >= -mFlakeSize - 1 && 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; } } 隨機(jī)數(shù)生成器, 包含區(qū)間隨機(jī)和上界隨機(jī). /** * 隨機(jī)生成器 * <p/> * Created by wangchenlong on 16/1/24. */ public class RandomGenerator { private static final Random RANDOM = new Random(); // 區(qū)間隨機(jī) public float getRandom(float lower, float upper) { float min = Math.min(lower, upper); float max = Math.max(lower, upper); return getRandom(max - min) + min; } // 上界隨機(jī) public float getRandom(float upper) { return RANDOM.nextFloat() * upper; } // 上界隨機(jī) public int getRandom(int upper) { return RANDOM.nextInt(upper); } }
2. 雪花視圖
雪花視圖, DELAY時(shí)間重繪, 繪制NUM_SNOWFLAKES個(gè)雪花.
初始化在onSizeChanged中進(jìn)行, 繪制在onDraw中進(jìn)行.
/** * 雪花視圖, DELAY時(shí)間重繪, 繪制NUM_SNOWFLAKES個(gè)雪花 * <p/> * Created by wangchenlong on 16/1/24. */ public class SnowView extends View { private static final int NUM_SNOWFLAKES = 150; // 雪花數(shù)量 private static final int DELAY = 5; // 延遲 private SnowFlake[] mSnowFlakes; // 雪花 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); } @TargetApi(21) public SnowView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { super(context, attrs, defStyleAttr, defStyleRes); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); if (w != oldw || h != oldh) { initSnow(w, h); } } private void initSnow(int width, int height) { Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); // 抗鋸齒 paint.setColor(Color.WHITE); // 白色雪花 paint.setStyle(Paint.Style.FILL); // 填充; mSnowFlakes = new SnowFlake[NUM_SNOWFLAKES]; for (int i = 0; i < NUM_SNOWFLAKES; ++i) { mSnowFlakes[i] = SnowFlake.create(width, height, paint); } } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); for (SnowFlake s : mSnowFlakes) { s.draw(canvas); } // 隔一段時(shí)間重繪一次, 動(dòng)畫(huà)效果 getHandler().postDelayed(runnable, DELAY); } // 重繪線(xiàn)程 private Runnable runnable = new Runnable() { @Override public void run() { invalidate(); } }; }
使用getHandler().postDelayed(runnable, DELAY);刷新頁(yè)面.
3. 全屏布局
全屏布局
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CollapsingToolbarLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:contentDescription="@null" android:scaleType="centerCrop" android:src="@drawable/christmas"/> <me.chunyu.spike.wcl_snowfall_demo.views.SnowView android:layout_width="match_parent" android:layout_height="match_parent"/> </FrameLayout> </android.support.design.widget.CollapsingToolbarLayout>
status bar默認(rèn)是不會(huì)被透明化的, 需要使用CollapsingToolbarLayout,
替換status bar的樣式, 否則會(huì)留有一定高度, 即使透明也不會(huì)填充.
樣式
<?xml version="1.0" encoding="utf-8"?> <resources> <style name="AppTheme.NoStatusBar"> <item name="android:windowTranslucentStatus">true</item> </style> </resources>
- js實(shí)現(xiàn)飛入星星特效代碼
- javascript實(shí)現(xiàn)隨機(jī)顯示星星特效
- Android仿開(kāi)心消消樂(lè)大樹(shù)星星無(wú)限循環(huán)效果
- jquery實(shí)現(xiàn)漫天雪花飛舞的圣誕祝福雪花效果代碼分享
- js點(diǎn)亮星星評(píng)分并獲取參數(shù)的js代碼
- js星星評(píng)分效果
- JS實(shí)現(xiàn)星星評(píng)分功能實(shí)例代碼(兩種方法)
- javascript+css好多網(wǎng)站用的選星星實(shí)現(xiàn)打分功能的函數(shù)
- js實(shí)現(xiàn)星星打分效果的方法
- js實(shí)現(xiàn)漫天星星效果
相關(guān)文章
基于RecyclerView實(shí)現(xiàn)橫向GridView效果
這篇文章主要為大家詳細(xì)介紹了基于RecyclerView實(shí)現(xiàn)橫向GridView效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07詳解Android Activity之間切換傳遞數(shù)據(jù)的方法
這篇文章主要介紹了詳解Android Activity之間切換傳遞數(shù)據(jù)的方法 的相關(guān)資料,需要的朋友可以參考下2016-04-04Android實(shí)現(xiàn)語(yǔ)音播放與錄音功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)語(yǔ)音播放與錄音功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07Android 軟鍵盤(pán)彈出隱藏?cái)D壓界面等各種問(wèn)題小結(jié)
這篇文章主要介紹了Android 軟鍵盤(pán)彈出隱藏?cái)D壓界面等各種問(wèn)題的相關(guān)知識(shí),本文給大家介紹的非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-11-11android實(shí)現(xiàn)讀取、搜索聯(lián)系人的代碼
本文給大家分享的是在安卓系統(tǒng)中實(shí)現(xiàn)讀取搜索聯(lián)系人的代碼,非常的實(shí)用,想學(xué)習(xí)安卓開(kāi)發(fā)的小伙伴一定不要錯(cuò)過(guò)。2015-03-03Android使用OkHttp請(qǐng)求自簽名的https網(wǎng)站的示例
本篇文章主要介紹了Android使用OkHttp請(qǐng)求自簽名的https網(wǎng)站的示例,非常具有實(shí)用價(jià)值,需要的朋友可以參考下、2017-09-09