关于作者
本文依旧是让你继续熟悉自定义view。
作者:陈岗不姓陈
博客地址:http://www.jianshu.com/u/6e749b52ea45
声明:本文由作者授权发布,未经原作者允许请勿转载
前言
最近在看轻芒杂志的时候,看到一个动画很带感很精致;
恰好这段时间也在看【HenCoder】的自定义view教程(里面写得非常非常详细,也有相应的习题等等),所以就趁热打铁,熟悉一下学习的知识。
国际惯例,先上轻芒杂志标记已读的动画
看了后是不是感觉很精致,很带感?
那下面来看一下我自己模仿的效果
静态图
是不是模仿得有几分相似,哈哈~,下面来看一下我实现的思路吧
分析
这个动画实现起来并不复杂,掌握几个基本的自定义view的方法即可。实现的思路分为选中状态和未选中状态
未选中的状态
未选中的状态很简单,需要绘制的有两个图形
-
圆环
-
勾
** 选中的状态**
绘制选中的动画稍微复杂一点,主要包括
1. 绘制圆环进度条 这个简单,直接使用drawArc()即可实现
2. 绘制向圆心收缩的动画 这个一开始的时候想用drawArc()加上设置画笔的宽度strokeWidth来实现,不过改变的宽度是往外扩张的,所以这个想法果断放弃。 之后,我的想法是这样的,看下图
我就打算先绘制一个黄色的背景,然后在这个图层上面绘制一个白色的圆,半径不断的缩小,直至为0,这就反过来得到了一个向中心收缩的动画,这可以叫逆转思维吧,最近看的一本书里面说到有时候反过来思考也许会有不一样的效果。
3.显示勾出来 关于这个√,我在网上搜了一波,也没有明确的指明怎么画法才是标准的,所以这里可以随意发挥,自己觉得好看就行。这里直接可以使用drawLine()可以一步搞定。
4.最后是圆环放大再回弹的效果 放大回弹可以使用drawArc(),配合改变画笔的宽度来实现即可
具体实现
确定进度圆环和钩的位置 经过上面分析,无论是选中状态还是未选中状态,进度圆环和钩的位置是不变的,所以我们先来确定圆环的位置和钩的位置 定义变量,标记状态
既然分选中状态和未选中状态,那个绘制过程中,就必须判断当前究竟是绘制未选中的呢还是选中了的呢。因此在这里,我定义了一个变量isChecked 绘制未选中状态
绘制过程中那些画笔就不详细说了,一开始初始化画笔最后绘制的时候调用即可
绘制选中状态 选中状态是个动画,因此我们这里需要调用postInvalidate()不断进行重绘,直到动画执行完毕;另外,我这里用计数器的方式来控制绘制的进度。
绘制圆环进度条 绘制进度圆环这里,我们定义一个计数器ringCounter,峰值为360(也就是360度),每执行一次onDraw()方法,我们对ringCounter进行自加,进而模拟进度。
最后记得调用postInvalidate()进行重绘 这一步后效果图如下
绘制向圆心收缩的动画 圆心收缩的动画在圆环进度达到100%的时候才进行,同理,也采用计数器circleCounter的方法来控制绘制的时间和速度
这一步后效果图如下
绘制钩
当白色的圆半径收缩到0后,就该绘制打钩了。
绘制打钩,这里问题不大,因为在onMeasure()中已经将钩的三个坐标点已经计算出来了,直接使用drawLine()即可画出来。 这一步后效果图如下
绘制放大再回弹的效果 放大再回弹的效果,开始的时机应该也是收缩动画结束后开始,也就是说跟打钩的动画同时进行
因为这里要放大并且回弹,所以这里的计数器我设置成一个不为0的数值,先设置成45(随意,这不是标准),然后没重绘一次,自减4个单位。
最后画笔的宽度是关键的地方,画笔的宽度根据scaleCounter的正负来决定是加还是减
完成最后一步的最终效果图
暴露外部接口 为了灵活的可以控制绘制的状态,我们可以暴露一个接口给外部设置是否选中
添加点击事件
控件到这里已经基本做好了,但还不是特别的完善。想想checkbox,它不需要暴露外部接口也能通过点击控件来实现选中还是取消选中,所以接下来要实现的就是为控件添加点击事件。先定义一个接口OnCheckedChangeListener,实现监听此控件的监听事件
接下来,初始化控件的点击事件
看看效果图
自定义配置项
这里简单说一下动画执行速度的配置,这里我设置了3档速度,我用枚举定义了三个速度的配置项
获取xml的配置,获取对应的枚举,从而得到配好的动画速度的一些参数
最终成果图
That ' s all~ 感谢大家阅读,最后再放一下项目的github地址
Github地址:TickView,一个精致的打钩小动画 https://github.com/ChengangFeng/TickView