国际惯例,先上轻芒杂志标记已读的动画
看了后是不是感觉很精致,很带感?
那下面来看一下我自己模仿的效果
静态图
是不是模仿得有几分相似,哈哈~,下面来看一下我实现的思路吧
2. 分析
这个动画实现起来并不复杂,掌握几个基本的自定义view的方法即可。
实现的思路分为选中状态
和未选中状态
2.1 未选中的状态
image
未选中的状态很简单,需要绘制的有两个图形
-
圆环
-
勾
2.2 选中的状态
绘制选中的动画稍微复杂一点,主要包括
- 绘制圆环进度条
这个简单,直接使用drawArc()
即可实现
- 绘制向圆心收缩的动画
这个一开始的时候想用drawArc()
加上设置画笔的宽度strokeWidth
来实现,不过改变的宽度是往外扩张的,所以这个想法果断放弃。
之后,我的想法是这样的,看下图
我就打算先绘制一个黄色的背景,然后在这个图层上面绘制一个白色的圆,半径不断的缩小,直至为0,这就反过来得到了一个向中心收缩的动画,这可以叫逆转思维吧,最近看的一本书里面说到有时候反过来思考也许会有不一样的效果。
- 显示勾出来
关于这个√,我在网上搜了一波,也没有明确的指明怎么画法才是标准的,所以这里可以随意发挥,自己觉得好看就行。这里直接可以使用drawLine()
可以一步搞定。
- 最后是圆环放大再回弹的效果
放大回弹可以使用drawArc()
,配合改变画笔的宽度来实现即可</