0°

Android自定义View——从零开始实现雪花飘落效果

内容预览:
  • 始发于微信公众号: 程序员小乐 分享编程技能、互联网技术、生活感悟、...~
  • 商业转载请联系作者获得授权,非商业转载请注明出处~
  • 如果您觉得不错,请别忘了分享到您的朋友圈让更多的人看到!! 您的举手...~

始发于微信公众号: 程序员小乐

分享编程技能、互联网技术、生活感悟、打造干货分享平台,将总结的技术、心得、经验分享给大家,这里不只限于技术!值得你去关注,点击上方 蓝字 快速关注。本号支持 投稿




  前言



转眼已是十一月下旬了,天气慢慢转冷,不知道北方是不是已经开始下雪了呢?本期教程我们就顺应季节主题,一起来实现 雪花飘落的效果吧。本篇效果思路参考自国外大神的Android实现雪花飞舞效果(https://link.jianshu.com/?t=http://www.open-open.com/lib/view/open1452263908573.html),并在此基础上实现进一步的封装和功能扩展


本篇只着重于思路和实现步骤,里面用到的一些知识原理不会非常细地拿来讲,如果有不清楚的api或方法可以在网上搜下相应的资料,肯定有大神讲得非常清楚的,我这就不献丑了。本着认真负责的精神我会把相关知识的博文链接也贴出来(其实就是懒不想写那么多哈哈),大家可以自行传送。为了照顾第一次阅读系列博客的小伙伴,本篇会出现一些在之前系列博客就讲过的内容,看过的童鞋自行跳过该段即可


国际惯例,先上效果图


Android自定义View——从零开始实现雪花飘落效果


目录


  • 绘制一个循环下落的“雪球”

  • 封装下落物体对象

  • 扩展一:增加导入Drawable资源的构造方法和设置物体大小的接口

  • 扩展一:扩展二:实现雪花“大小不一”、“快慢有别”的效果

  • 扩展三:引入“风”的概念


  绘制一个循环下落的“雪球”



我们先从最简单的部分做起,自定义View中实现循环动画的方法有很多,最简单直接的当然是用Animation类去实现,但考虑到无论是雪花、雪球亦或是雨滴什么的,每个独立的个体都有自己的起点、速度和方向等等,其下落的过程会出现很多随机的因素,实现这种非规律的动画Animation类就不怎么适用了,因此我们这次要利用线程通信实现一个简单的定时器,达到周期性绘制View的效果。这里我们简单绘制一个“雪球”(其实就是个白色背景的圆形哈哈)来看看定时器的效果,新建一个FallingView


Android自定义View——从零开始实现雪花飘落效果

Android自定义View——从零开始实现雪花飘落效果


效果如图

Android自定义View——从零开始实现雪花飘落效果


在上述代码中View基本的框架我们已经搭好了,思路其实很简单,我们需要做仅仅是在每次重绘之前更新做下落运动的物体的位置即可

封装下落物体对象



要实现大雪纷飞的效果,很明显只有一个雪球是不够的,而且雪也不能只有雪球一个形状,我们希望可以自定义雪的样式,甚至不局限于下雪,还可以下雨、下金币等等,因此我们要对下落的物体进行封装。为了以后物体类对外方法代码的可读性,这里我们采用Builder设计模式来构建物体对象类,新建FallObject


Android自定义View——从零开始实现雪花飘落效果

Android自定义View——从零开始实现雪花飘落效果

Android自定义View——从零开始实现雪花飘落效果

Android自定义View——从零开始实现雪花飘落效果


FallingView中相应地设置添加物体的方法


Android自定义View——从零开始实现雪花飘落效果

Android自定义View——从零开始实现雪花飘落效果


在Activity中向FallingView添加一些物体看看效果


Android自定义View——从零开始实现雪花飘落效果


效果如图

Android自定义View——从零开始实现雪花飘落效果


到这里我们完成了一个最基础的下落物体类,下面开始扩展功能和效果

  扩展一:增加导入Drawable资源的构造方法和设置物体大小的接口


我们之前的FallObject类中Builder只支持bitmap的导入,很多时候我们的图片样式都是从drawable资源文件夹中获取的,每次都要将drawable转成bitmap是件很麻烦的事,因此我们要在FallObject类中封装drawable资源导入的构造方法,

修改FallObject


Android自定义View——从零开始实现雪花飘落效果


有了drawable资源导入的构造方法,肯定需要配套改变FallObject图片样式大小的接口,依然是在FallObject的Builder中扩展相应的接口


Android自定义View——从零开始实现雪花飘落效果


在Activity中初始化下落物体样式时我们就可以导入drawable资源和设置物体大小了


Android自定义View——从零开始实现雪花飘落效果


来看下效果

Android自定义View——从零开始实现雪花飘落效果



  扩展二:实现雪花“大小不一”、“快慢有别”的效果



之前我们通过导入drawable资源的方法让屏幕“下起了雪花”,但雪花个个都一样大小,下落速度也都完全一致,这显得十分的单调,看起来一点也不像现实中的下雪场景。因此我们需要利用随机数实现雪花“大小不一”“快慢有别”的效果,修改FallObject


Android自定义View——从零开始实现雪花飘落效果

Android自定义View——从零开始实现雪花飘落效果

Android自定义View——从零开始实现雪花飘落效果

Android自定义View——从零开始实现雪花飘落效果

Android自定义View——从零开始实现雪花飘落效果


在Activity中设置相应参数即可


Android自定义View——从零开始实现雪花飘落效果


效果如图,是不是看起来感觉好多了๑乛◡乛๑


Android自定义View——从零开始实现雪花飘落效果



  扩展三:引入“风”的概念



“风”其实是一种比喻,实际上要做的是让雪花除了做下落运动外,还会横向移动,也就是说我们要模拟出雪花在风中乱舞的效果。为了让雪花在X轴上的位移不显得鬼畜(大家可以直接随机增减x坐标值就知道为什么是鬼畜了哈哈),我们采用正弦函数来获取X轴上的位移距离,如图所示


Android自定义View——从零开始实现雪花飘落效果


正弦函数曲线见下图

Android自定义View——从零开始实现雪花飘落效果

我们选取-π到π这段曲线,可以看出角的弧度在为π/2时正弦值最大(-π/2时最小),因此我们在计算角度时还需要考虑其极限值。同时,因为我们添加了横向的移动,所以判断边界时要记得判定最左和最右的边界,修改FallObject


Android自定义View——从零开始实现雪花飘落效果

Android自定义View——从零开始实现雪花飘落效果

Android自定义View——从零开始实现雪花飘落效果

Android自定义View——从零开始实现雪花飘落效果


在Activity中调用新增加的接口


Android自定义View——从零开始实现雪花飘落效果


效果如图

Android自定义View——从零开始实现雪花飘落效果



  总结



至此本篇教程到此结束,如果大家看了感觉还不错麻烦点个赞,你们的支持是我最大的动力~


如何您想进技术群和大牛们交流,关注公众号在后台回复 “加群”,或者 “学习” 即可

作者:Anlia

链接:http://www.jianshu.com/p/ce704b03f3f5

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

如果您觉得不错,请别忘了分享到您的朋友圈让更多的人看到!! 您的举手之劳,就是对我最好的支持,非常感谢!

每日英文


Don’t expect, not imaginary, don’t try so hard, let it be, if destined, it will happen.

不要期待,不要假想,不要强求,顺其自然,如果注定,便一定会发生。


乐乐有话说


至于未来会怎样,要用力走下去才知道,先变成更喜欢的自己,路还长,天总会亮。


Android自定义View——从零开始实现雪花飘落效果


推荐阅读




知识星球
这里聚集了业界内的大牛,值得各位大牛的加入!

Android自定义View——从零开始实现雪花飘落效果 

看完本文有收获?请转发分享给更多人
关注「杨守乐」,提升编程技能

【QQ技术群】279126311 []
【QQ技术群】484572225 [未]

以上就是:Android自定义View——从零开始实现雪花飘落效果 的全部内容。

本站部分内容来源于互联网和用户投稿,如有侵权请联系我们删除,谢谢。
Email:[email protected]


0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论