带你手把手讲解一个复杂动效的自定义绘制

引子

自定义View是android高级UI知识体系的重要一环。也是区分中高级开发者的分水岭。高级开发者，知识体系完善，但凡能够语言描述出来的特效，他们总能给出解决方案。而中级开发者由于眼界受限，往往遇到复杂需求就无从下手。
一些看似复杂的特效，其实android已经为我们提供了一套解决方案，这是中级进阶高级的必学知识。
本文给出完整攻略，保证一篇入魂。= =!

（顺手留下GitHub链接，需要获取相关面试等内容的可以自己去找）
https://github.com/xiangjiana/Android-MS

效果图

下图中可以看到，首先我们看到了一个心形，然后有波浪在跳动，最后绿色填满了整个心形

乍一看

诶？心形是怎么绘制的？诶？波浪是怎么画出来的，又是如何动起来的？诶? 文字是怎么呈现出同一时刻的两种颜色的？

不知道是不是有人有这样的疑惑````请继续往下看.

效果拆解

拿到一个复杂特效，第一件事不要慌，先仔细分析一下，这个特效里面具体有哪些细节可以拆分出来。复杂的东西都是由简单的细节 组合而成。

开始拆解

1、绘制区域是一个心形
2、波浪从最下面开始， 逐渐用绿色填充了整个心形
3、中间有文字内容“ 一条大灰狼”,并且在波浪增长的过程中，文字存在一段时间的上下两部分 颜色不同的状态.

本案例用到的知识点：

1、 canvas.clipPath 画布裁剪
2、 canvas.save 画布状态保存
3、 canvas.restore 恢复
4、 canvas.translate 画布平移
5、 path.rCubicTo 构建三阶贝塞尔曲线(相当于上一个点位置)
6、属性动画 ValueAnimator / AnimatorSet

开始撸码
第 1步：构建一个心形区域
当一个复杂图形摆在我们面前，而且还是不规则图形，我们首先应该想到的，就是 android.graphics.Path 类，它可以记录复杂图形的全部点组成的路径。关键代码：

/**
     * 构建心形
     * <p>
     * 注意，它这个是以 矩形区域中心点为基准的图形，所以绘制的时候，必须先把坐标轴移动到 区域中心
     */
     private void initHeartPath(Path path) {
        List<PointF> pointList = new ArrayList<>();
        pointList.add(new PointF(0,Utils.dp2px(-38)));
        pointList.add(new PointF(Utils.dp2px(50),Utils.dp2px(-103)));
        pointList.add(new PointF(Utils.dp2px(112),Utils.dp2px