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

引子

自定义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(-61)));
        pointList.add(new PointF(Utils.dp2px(112),Utils.dp2px(-12)));
        pointList.add(new PointF(Utils.dp2px(112),Utils.dp2px(37)));
        pointList.add(new PointF(Utils.dp2px(51),Utils.dp2px(90)));
        pointList.add(new PointF(0,Utils.dp2px(129)));
        pointList.add(new PointF(Utils.dp2px(-51),Utils.dp2px(90)));
        pointList.add(new PointF(Utils.dp2px(-112),Utils.dp2px(37)));
        pointList.add(new PointF(Utils.dp2px(-112), Utils.dp2px(-12)));
        pointList.add(new PointF(Utils.dp2px(-112),Utils.dp2px(-61)));
        pointList.add(new PointF(Utils.dp2px(-50),Utils.dp2px(-103)));

        path.reset();
        for(int i =0; i <4; i++) {
            if (i ==0) {
                path.moveTo(pointList.get(i *3).x, pointList.get(i *3).y);
            } else {
                path.lineTo(pointList.get(i * 3).x, pointList.get(i *3).y);
            }

            int endPointIndex;
            if (i ==3) {
                endPointIndex = 0;
            } else {
                endPointIndex = i *3+3;
            }

            path.cubicTo(pointList.get(i *3+1).x, pointList.get(i *3+1).y,
                    pointList.get(i *3+2).x, pointList.get(i *3+2).y,
                    pointList.get(endPointIndex).x, pointList.get(endPointIndex).y);
                   //你的心形就是用贝塞尔曲线来画的吗
        }
        path.close();
        path.computeBounds(mHeartRect,false);
       //把path所占据的最小矩形区域，返回出去
    }

传入一个 Path引用，然后在方法内部对 path进行各种 api调用改变其属性. 这里需要提及一个重点：最后一行代码 path.computeBounds(mHeartRect,false);意思是，无论什么样的 path，它都会占据一个最小矩形区域， computeBounds方法可以获取这个矩形区域，设置给入参 mHeartRect.

第 2步：将心形区域裁剪出来, 裁剪之后，后续的绘制都只会显示在这个区域之内
(为了作图方便，我们通常先把坐标轴原点移动到 绘制区域的正中央)

 @Override
  protected void onDraw(Canvas canvas) {

        int width = getWidth();
        int height = getHeight();
        canvas.translate(width / 2, height /2);
        //为了作图方便，我们通常先把坐标轴原点移动到 绘制区域的正中央
        ...省略无关代码

        canvas.clipPath(mMainPath);
        //裁剪心形区域
        canvas.save();
       //保存画布状态

        ...省略无关代码

    }

第 3步：绘制波浪区域
这里有两点细节

1）波浪区域分为两块， top和 bottom 上下两块
2) 整个波浪区域的长度为 心形矩形范围宽度的 2倍 ( ?为什么是2倍?因为上面的波浪动画，其实是整个波浪区域平移造成的视觉效果，为了让这个动画可以无限执行，设计两倍宽度，当一半的宽度向右移动刚好触及心形矩形区域的右边框的时候，让它还原到原始位置，这样就能无缝衔接。)

关键代码1 - 波浪path的构建

 /**
     * @param ifTop   是否是上部分; 上下部分的封口位置不一样
     * @param r       心形的矩形区域
     * @param process 当前进度值
     */
    private void resetWavePath(boolean ifTop,RectF r,float process,Pathpath) {
        final float width = r.width();
        final float height = r.width();

        path.reset();

        if( ifTop) {
            path.moveTo(r.left - width, r.top);
        } else {
            path.moveTo(r.left - width, r.bottom);
            //下部，初始位置点在 下
       }

        float waveHeight = height /8f;//波动的最大幅度

        //找到矩形区域的左边线中点
        path.lineTo(r.left - width,r.bottom - height * process);

        //做两个周期的贝塞尔曲线
        for (int i =0; i < 2; i++) {
            float px1, py1, px2, py2, px3, py3;

            px1 = width /4;
            py1 = -waveHeight;

            px2 = width /4*3;
            py2 = waveHeight;

            px3 = width;
            py3 = 0;

            path.rCubicTo(px1, py1, px2, py2, px3, py3);
        }
        if (ifTop) {
            path.lineTo(r.right, r.top);
        } else {
            path.lineTo(r.right, r.bottom);
        }
        path.close();

    }

关键代码2- 属性动画改变两个全局变量波浪的向上增长系数以及横向波浪动画系数：

    AnimatorSet animatorSet;
    // 动起来
    public void startAnimator() {

        if(animatorSet == null) {
            animatorSet = new AnimatorSet();
            ValueAnimator growAnimator = ValueAnimator.ofFloat(0f, 1f);
            growAnimator.addUpdateListener(animation -> growProcess =(float) animation.getAnimatedValue());
            growAnimator.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    animatorSet.cancel();
                }
            });
            growAnimator.setInterpolator(new DecelerateInterpolator());
            growAnimator.setDuration((long)(4000/ animatorSpeedCoefficient));

            ValueAnimator waveAnimator = ValueAnimator.ofFloat(0f,1f);
            waveAnimator.setRepeatCount(ValueAnimator.INFINITE);
            waveAnimator.setRepeatMode(ValueAnimator.RESTART);
            waveAnimator.addUpdateListener(animation -> {
                waveProcess = (float) animation.getAnimatedValue();
                invalidate();
            });
            waveAnimator.setInterpolator(new LinearInterpolator());
            waveAnimator.setDuration((long)(1000/ animatorSpeedCoefficient));

            animatorSet.playTogether(growAnimator, waveAnimator);
            animatorSet.start();
        } else {
            animatorSet.cancel();
            animatorSet.start();
        }
    }

关键代码3- 利用属性动画改变的全局变量，构建动态效果

  @Override
   protected void onDraw(Canvas canvas) {

        int width = getWidth();
        int height = getHeight();
        canvas.translate(width /2, height /2);
        //为了作图方便，我们通常先把坐标轴原点移动到 绘制区域的正中央
        curXOffset = waveProcess * mHeartRect.width();
       //当前X轴方向上 波浪偏移量

        canvas.clipPath(mMainPath);
        canvas.save();

        mainRect = new Rect();
        ...省略无关代码

        // 上波浪区域
        resetWavePath(true, mHeartRect, growProcess, topWavePath);
        canvas.translate(curXOffset,0);
        canvas.clipPath(topWavePath);
        canvas.drawPath(topWavePath, mTopPaint);
        ...省略无关代码

        //下波浪区域
        resetWavePath(false, mHeartRect, growProcess, bottomWavePath);
        canvas.restore();
        canvas.translate(curXOffset,0);
        canvas.clipPath(bottomWavePath);
        canvas.drawPath(bottomWavePath, mBottomPaint);
       ...省略无关代码

    }

第 4步：绘制“一条大灰狼” 到心形中央，并且达成双色效果
这里有两个细节：

1. canvas.drawText， 就算你把paint 设置了 .setTextAlign(Paint.Align.CENTER); 它也未必会在你给的 x，y为中心 绘制。原因就不解释了，谷歌大佬就是这么设计的。解决方法：利用 paint.getTextBounds，获得文字的矩形区域。然后在真正 canvas.drawText，计算y的时候考虑这个矩形区域,就像下面这样如下

   mainRect = new Rect();
   textBottomPaint.getTextBounds(text,0, text.length(), mainRect);

2. 由于之前波浪的横向移动，坐标轴产生了平移，所以我绘制文字，要将平移的距离减去，再绘制，保证居中，且文字位置不随着波浪的横向移动而变化。

完整代码如下(此步骤的关键代码已经标红)：

结语

来解答 乍一看里面提出的3个问题：

诶？心形是怎么绘制的？答：构建Path，然后 canvas.clipPath裁剪画布，裁剪之后，所有的作图效果就只在这个心形区域内可见

诶？波浪是怎么画出来的，又是如何动起来的？答：波浪，或者说波浪区域，也是 Path构建，主要由一根波浪线以及三根直线组成，是一个封闭区域. 让波浪动起来，其实就是 canvas平移操作，利用属性动画+双倍宽度的波浪区域，形成无缝无限循环动画.

诶? 文字是怎么呈现出同一时刻的两种颜色的？答：在两个相邻的波浪区域，使用不一样的颜色绘制两次文字。视觉效果上还是一串文字，但是实际上是两次绘制的组合效果。神奇吗？神奇个屁，其实就是 同一位置绘制两次文字，后面的覆盖前面的......话粗理不粗- -!

话题延伸

要想随心所欲地掌控自定义View，需要有完整的知识体系。

view的树形结构概念
测量，布局，绘制流程
事件分发/滑动冲突核心原理
CanvasPaintPath绘制常用api
Bitmap位图
属性动画
如果与 系统的某些View发生交互，还有可能需要你了解 系统源码
但是要想随心所欲地使用 自定义View，仅仅如此还不够，还需要：良好的数学基础

因为大部分的不规则图形，可能都需要数学公式思想的辅助，像是:

心形path的构建
无限波浪的设计思路
后续文章将会 提到的 贝塞尔曲线的使用

都离不开多年前数学课上的时候养成的数学思维，如果数学基础比较糟糕，做起这些特效，往往会比较困难.

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