Android自定义View：一个精致的打钩小动画，看这一篇就够了

国际惯例，先上轻芒杂志标记已读的动画

看了后是不是感觉很精致，很带感？

---

那下面来看一下我自己模仿的效果

静态图

是不是模仿得有几分相似，哈哈~，下面来看一下我实现的思路吧

2. 分析

---

这个动画实现起来并不复杂，掌握几个基本的自定义view的方法即可。

实现的思路分为选中状态和未选中状态

2.1 未选中的状态

image

未选中的状态很简单，需要绘制的有两个图形

• 圆环

• 勾

2.2 选中的状态

绘制选中的动画稍微复杂一点，主要包括

1. 绘制圆环进度条

这个简单，直接使用drawArc()即可实现

2. 绘制向圆心收缩的动画

这个一开始的时候想用drawArc()加上设置画笔的宽度strokeWidth来实现，不过改变的宽度是往外扩张的，所以这个想法果断放弃。

之后，我的想法是这样的，看下图

我就打算先绘制一个黄色的背景，然后在这个图层上面绘制一个白色的圆，半径不断的缩小，直至为0，这就反过来得到了一个向中心收缩的动画，这可以叫逆转思维吧，最近看的一本书里面说到有时候反过来思考也许会有不一样的效果。

3. 显示勾出来

关于这个√，我在网上搜了一波，也没有明确的指明怎么画法才是标准的，所以这里可以随意发挥，自己觉得好看就行。这里直接可以使用drawLine()可以一步搞定。

4. 最后是圆环放大再回弹的效果

放大回弹可以使用drawArc()，配合改变画笔的宽度来实现即可</