时间: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中进行.
使用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的样式, 否则会留有一定高度, 即使透明也不会填充.
样式
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了基于html5canvas实现漫天飞雪效果的方法,运行该实例可以看到很棒的下雪效果。如下图所示:主要代码如下:复制代码代码如下:漫天飞雪*{mar
本文实例为大家分享了漫天小星星效果的实现代码,供大家参考,具体内容如下效果图:实现代码:newdocument//点出漫天小星星//背景色//给html添加on
本文在实现雪花效果的基础上,根据漫天飞舞雪花,实现下雨天场景的效果,使用eclipseandroid版本,具体内容如下雪花效果图:具体代码:1、漫天飞舞的雪花主
单页显示3个Item的ViewPager炫酷切换效果,适用于Banner等。效果图RotateYRotateDownRotateUpAlphaScaleInSc
Android切圆图效果图如下:MyView类publicclassMyViewextendsView{Bitmapbmp;Paintpaint=newPain