Android自定义View：一个精致的打钩小动画

Github地址：TickView，一个精致的打钩小动画
https://github.com/ChengangFeng/TickView

1. 前言

最近在看轻芒杂志的时候，看到一个动画很带感很精致；

恰好这段时间也在看【HenCoder】的自定义view教程（里面写得非常非常详细，也有相应的习题等等），所以就趁热打铁，熟悉一下学习的知识。

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

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

---

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

静态图

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

2. 分析

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

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

2.1 未选中的状态

image

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

• 圆环
• 勾

2.2 选中的状态

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

1. 绘制圆环进度条
   这个简单，直接使用drawArc()即可实现

2. 绘制向圆心收缩的动画
   这个一开始的时候想用drawArc()加上设置画笔的宽度strokeWidth来实现，不过改变的宽度是往外扩张的，所以这个想法果断放弃。
   之后，我的想法是这样的，看下图

   

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

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

4. 最后是圆环放大再回弹的效果
   放大回弹可以使用drawArc()，配合改变画笔的宽度来实现即可

3.具体实现

3.1 确定进度圆环和钩的位置

经过上面分析，无论是选中状态还是未选中状态，进度圆环和钩的位置是不变的，所以我们先来确定圆环的位置和钩的位置

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    ...
    //设置圆圈的外切矩形,radius是圆的半径，centerX，centerY是控件中心的坐标
    mRectF.set(centerX - radius, centerY - ra