Android 炫舞漫天飞雪效果图

时间:2021-05-21

今天周日,不适合出门,太冷了,俗说:一九二九不出手,三九四九零来走。。

我们的应用也可以有一些冬天的效果, 教大家做一个下雪的动画效果, 参考.

主要

(1) 隐藏status bar, 全屏显示图片.
(2) 绘制多个点, 实现移动效果.
(3) 回收点, 避免重复创建.

我喜欢用注释说话, 请大家多关注代码中的注释.

Github下载地址

1. 雪花类

雪花的属性包含: 随机量, 位置, 增量, 大小, 角度, 画笔.

绘画的过程中, 使用角度会移动点的位置, 每次速率都不同.

当雪花移出屏幕时, 会重新使用, 在屏幕的顶端重新落下.

算法参考.

/*** 雪花的类, 移动, 移出屏幕会重新设置位置.* <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; // 半PIprivate 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) {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; // 随机晃动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 - 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;}}随机数生成器, 包含区间随机和上界随机./*** 随机生成器* <p/>* Created by wangchenlong on 16/1/24.*/public class RandomGenerator {private static final Random RANDOM = new Random();// 区间随机public float getRandom(float lower, float upper) {float min = Math.min(lower, upper);float max = Math.max(lower, upper);return getRandom(max - min) + min;}// 上界随机public float getRandom(float upper) {return RANDOM.nextFloat() * upper;}// 上界随机public int getRandom(int upper) {return RANDOM.nextInt(upper);}}

2. 雪花视图

雪花视图, DELAY时间重绘, 绘制NUM_SNOWFLAKES个雪花.
初始化在onSizeChanged中进行, 绘制在onDraw中进行.

/*** 雪花视图, DELAY时间重绘, 绘制NUM_SNOWFLAKES个雪花* <p/>* Created by wangchenlong on 16/1/24.*/public class SnowView extends View {private static final int NUM_SNOWFLAKES = 150; // 雪花数量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);}// 隔一段时间重绘一次, 动画效果getHandler().postDelayed(runnable, DELAY);}// 重绘线程private Runnable runnable = new Runnable() {@Overridepublic void run() {invalidate();}};}

使用getHandler().postDelayed(runnable, DELAY);刷新页面.

3. 全屏布局

全屏布局

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CollapsingToolbarLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><FrameLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><ImageViewandroid: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.SnowViewandroid:layout_width="match_parent"android:layout_height="match_parent"/></FrameLayout></android.support.design.widget.CollapsingToolbarLayout>

status bar默认是不会被透明化的, 需要使用CollapsingToolbarLayout,
替换status bar的样式, 否则会留有一定高度, 即使透明也不会填充.
样式

<?xml version="1.0" encoding="utf-8"?><resources><style name="AppTheme.NoStatusBar"><item name="android:windowTranslucentStatus">true</item></style></resources>

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章