android实现满屏小星星不断飘落/天女散花的效果

2017-09-02 本文已影响0人 wanghai328

先上效果图，如下：

效果图

现在，我们就来实现这种效果。

分析下这个gif，我们可以发现，图中的各个小星星(暂且都叫小星星吧)下落的速度是不一样的，角度有一定的旋转，ok，撸码开始。

首先我们定义一个实体类，就叫Star吧，包含x坐标、y坐标、旋转角度、下落速度、旋转速度、小星星的宽高等属性，一个生成Star对象的静态方法,在该方法里初始化各种属性，核心代码如下：

在该方法里，首先通过bitmapFactory将传过来的资源文件转换为bitmap，获取其宽高，即小星星的宽高，然后初始化x、y坐标以及旋转角度和旋转速度，最后将bitmap对象存储在map集合里。这样，我们的star就已经定义好了，现在就可以自定义View实现我们想要的效果了。

创建一个StarView，继承自View，在构造方法里监听animator，animator更新时计算每个小星星的位置及旋转角度，然后重绘（注意：当小星星的位置已经超出屏幕时，将其移到屏幕上方继续下落）：

然后在onSizeChanged()方法里初始化一些变量条件：

最后就是绘制了，在onDraw()里遍历每个小星星的状态（位置、旋转角度），并绘制到画布上,这个就比较简单了

这样，我们的这个自定义的View也算基本完成了，接下来要做的就是在Acttivity中调用了，可以通过handler每200毫秒向starView中添加25个小星星，直至小星星数目超过最大值，这个比较简单，代码就不贴了，文末会给出完整代码

那这样问出的效果就基本实现了。那我要是想控制这个动画的播放与暂停可以做到么？答案当然是肯定的！我们是通过animator的更新来计算小星星的位置的，只要控制这个animator就可以啦，ok，加上两段代码

注意：一定要加个isRunning的判断条件，不然会有问题，具体什么问题，可以自己去试试~~~~~

然后在Activity里加个加个按钮

OK,运行效果如下：

有木有发现问题？

很显然，当我们暂停的时间稍长一点再继续的时候，小星星会堆叠在一起，时间越长效果越明显，这可不是我们想要的效果哈，so，这是为啥子呢？

其实这种问题不用想，肯定是重绘时候小星星的位置不对，复查代码发现小星星的y坐标是这样来的flake.y+= (flake.speed* secs);

floatsecs = (nowTime -prevTime) /1000f;

而secs 是由当前时间减去开始时间计算的，所以当点击继续的时候，小星星的Y坐标已经超过屏幕，而后都被移动都屏幕上端了,修改代码，在start的时候重新计算prevTime

重新运行代码：

ok,问题解决,本文到此结束，最后别忘了在activity销毁的时候释放animator哦~~~