Android自定义View-一个可可爱爱的波浪特效

1. 概述

最近开始学习自定义View，看到现在公司项目上的一个动画效果，顿时想到其实可以自己画，于是就开始着手优（zhuang）化（bi）这个动画。

动画如下：

其实很简单对不对，但初学者的我还是要思考一下。

2. 动画分解

动画有两部分，

• 第一个是背景，这个直接画bitmap就可以了。
• 第二个就是这个波浪，我们仔细观察这个波浪其实是一个有规律的，基于每一个点的原点Y轴方向的不断拉伸。 但是，每一个点，其拉伸的量不一致，而且时间也有差错。

根据UI提供的详细动画细节，可以知道：

• 动效总共时间为2S，之后反复循环，每秒帧数为24帧，其中圆形元素控件大小为6px，拉伸都是以圆心为拉伸中心点进行拉伸。 0-1s为从左到右的拉伸动画，1s-2s为从右到左的拉伸动画，之后为循环。

• 每一个点，都有5种不同的拉伸量，这里我们把对应的拉伸后的Y的高度命名为：

public float maxHeight;
public float threeHeight;
public float halfHeight;
public float oneHeight;

其中还有一种拉伸量为0。maxHeight是最大的高度，threeHeight为次最高高度。

列出几个关键帧（约定，从左到右将元素命名为元素1、元素2、元素3、元素4、元素5）

• 第1帧： 初始化，每一个的点均为 6 px * 6 px

• 第2帧： 元素1 高7.3px 对应 oneHeight，其他元素保持初始状态。

• 第3帧： 元素1 高11px 对应 halfHeight，其他元素保持初始状态

• 第4帧： 元素1 高14.7px 对应 threeHeight，元素2 高8.3px 对应 oneHeight，其他元素保持初始状态。

• 第5帧： 元素1 高16px 对应 maxHeight，元素2 高15px 对应 halfHeight，其他元素保持初始状态。

• 第6帧： 元素1 高14.7px 对应 threeHeight，元素2 高21.7px 对应 threeHeight，元素3 高10.1px 对应 oneHeight，其他元素保持初始状态。

... 通过观察，我...先定义一个类，来存储这些点的四种拉伸量的高度（我们也称之为状态）和中心位置的坐标：

public class VoiceAnimPoint {
    public int centerX, centerY;
    public float maxHeight;
    public float threeHeight;
    public float halfHeight;
    public float oneHeight;
    public VoiceAnimPoint(int centerX, int centerY, float maxHeight, float threeHeight, float halfHeight, float oneHeight) {
        this.centerX = centerX;
        this.centerY = centerY;
        this.maxHeight = maxHeight;
        this.threeHeight = threeHeight;
        this.halfHeight = halfHeight;
        this.oneHeight = oneHeight;
    }
}

然后在 onSizeChanged 中初始化这五个点：

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    points = new VoiceAnimPoint[5];
    points[0] = new VoiceAnimPoint(getWidth()/2-24,getHeight()/2,16f,14.7f,11f,7.3f);
    points[1] = new VoiceAnimPoint(getWidth()/2-12,getHeight()/2,24f,21.7f,15f, 8.3f);
    points[2] = new VoiceAnimPoint(getWidth()/2,getHeight()/2,38f,33.9f,22f,10.1f);
    points[3] = new VoiceAnimPoint(getWidth()/2+12,getHeight()/2,24f,21.7f,15f,8.3f);
    points[4] = new VoiceAnimPoint(getWidth()/2+24,getHeight()/2,16f,14.7f,11f,7.3f);
}

3. 波浪动效实现

对于元素1，我们看到有这样的一个变化过程：

那么我们可以构造这样的一个函数：

x暂时可以看成是第几帧，x=0，第1帧时候，y=0，代表原始状态，x=1，第2帧的时候，y=1，代表元素1 高7.3px 对应 oneHeight，y=2，代表元素1 高11px 对应 halfHeight，y=3，代表元素1 高11px 对应 threeHeight，y=4，代表元素1 高16px 对应 maxHeight，，，

那么其他的元素呢，我们把他们的变化过程放在一起：

发现，每一个元素的变化都是一样的，只不过是x轴的位移，而相邻的元素的x相差2，也就是假如 元素1在 oneHeight，x=8 状态的时候，对应的 相邻元素2 就是元素1在x-2=6的时候的状态，也就是 元素2的 threeHeight 状态，而，元素2相邻的元素3就是在元素1的x-2-2=4的时候的状态，为 元素3的 threeHeight，，，如此类推。所以我们只用元素1当前的位置和上面的函数图，就可以推断出其他元素的情况。

那么onDraw中可以这样来：pointIndex 代表着元素1绘制的第 N 帧，然后依次按照如上所分析的去得到其他元素的对应帧。

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    for (int i = 0; i < points.length; i++) {
        VoiceAnimPoint point = points[i];
        int y = indexChangeFunc(pointIndex - i*2);
        switch (y) {
            case 0:
                canvas.drawLine(point.centerX,point.centerY, point.centerX,point.centerY+0.01f,paint);
                break;
            case 2:
                canvas.drawLine(point.centerX,point.centerY-point.halfHeight/2+pointWidth/2,
                        point.centerX,point.centerY+point.halfHeight/2-pointWidth/2,paint);
                break;
            case 4:
                canvas.drawLine(point.centerX,point.centerY-point.maxHeight/2+pointWidth/2,
                        point.centerX,point.centerY+point.maxHeight/2-pointWidth/2,paint);
                break;
            case 1:
                canvas.drawLine(point.centerX,point.centerY-point.oneHeight/2+pointWidth/2,
                        point.centerX,point.centerY+point.oneHeight/2-pointWidth/2,paint);
                break;
            case 3:
                canvas.drawLine(point.centerX,point.centerY-point.threeHeight/2+pointWidth/2,
                        point.centerX,point.centerY+point.threeHeight/2-pointWidth/2,paint);
                break;
        }
    }
}

其中的0-4状态就是上面的函数的Y值，通过X得到相应的Y，而Y则对应则元素的5中状态，onDraw中就是根据5中状态去绘制相应的高度：

/**
 * 动画轨迹其实符合一个函数
 * 这里传入对应的x，返回函数的y
 * @param x 位置
 * @return y 4 ： 最大， 3：threeHeight， 2： 一半， 1：oneHeight， 0 ：0 。
 */
private int indexChangeFunc(int x) {
    if (x<0)
        return 0;
    else if (x<4)
        return x;
    else if (x<8)
        return -x + 8;
    else
        return 0;
}

4. 几个关键的地方

• 这里的波浪条是用drawLine画，而且上下端是圆角的，所以我们要设置Paint的线帽为圆形，

paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(0xffC2E379);
paint.setStyle(Paint.Style.FILL);
paint.setStrokeWidth(pointWidth);
paint.setStrokeCap(Paint.Cap.ROUND);

注意的一点，假如你的Paint宽10px，而同时你又设置了线帽为圆形，画了20px的line，那其实你画的如下：

所以才有上面的onDraw中的，高度要减去线帽：

canvas.drawLine(point.centerX,point.centerY-point.maxHeight/2+pointWidth/2,point.centerX,point.centerY+point.maxHeight/2-pointWidth/2,paint);

• 最后还有这个动效要倒叙播放，那么我们可以让 pointIndex 自增代表正序播放，pointIndex 自减代表倒叙播放。

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawBitmap(bgBitmap, getWidth() / 2 - bgBitmap.getWidth() / 2, getHeight() / 2 - bgBitmap.getHeight() / 2, paint);
    for (int i = 0; i < points.length; i++) {
        VoiceAnimPoint point = points[i];
        int y = indexChangeFunc(pointIndex - i*2);
        switch (y) {
            case 0:
                canvas.drawLine(point.centerX,point.centerY, point.centerX,point.centerY+0.01f,paint);
                break;
            case 2:
                canvas.drawLine(point.centerX,point.centerY-point.halfHeight/2+pointWidth/2,
                        point.centerX,point.centerY+point.halfHeight/2-pointWidth/2,paint);
                break;
            case 4:
                canvas.drawLine(point.centerX,point.centerY-point.maxHeight/2+pointWidth/2,
                        point.centerX,point.centerY+point.maxHeight/2-pointWidth/2,paint);
                break;
            case 1:
                canvas.drawLine(point.centerX,point.centerY-point.oneHeight/2+pointWidth/2,
                        point.centerX,point.centerY+point.oneHeight/2-pointWidth/2,paint);
                break;
            case 3:
                canvas.drawLine(point.centerX,point.centerY-point.threeHeight/2+pointWidth/2,
                        point.centerX,point.centerY+point.threeHeight/2-pointWidth/2,paint);
                break;
        }
    }
    if (!isRevert) {
        pointIndex++;
    }
    else {
        pointIndex--;
    }
    if (pointIndex == 23) {
        isRevert = true;
        pointIndex = 17;
    }
    else if (pointIndex == -6) {
        pointIndex = 0;
        isRevert = false;
    }
}

• 暴露开启动画，暂停动画的接口，根据动效的时间描述，我们应该每1000/24=42毫秒去重新绘制，也就是调用：invalidate()方法。

private Runnable r = new Runnable() {
    @Override
    public void run() {
        VoiceAnimView.this.invalidate();
        VoiceAnimView.this.postDelayed(r, 42);
    }
};
public void startAnim() {
    if (!isStart) {
        isStart = true;
        this.post(r);
    }
}
public void stopAnim() {
    if (isStart) {
        isStart = false;
        this.removeCallbacks(r);
    }
}

• 对比原来的动画 原来的是用lottie直接去实现，可谓方便快捷：

加载动画后，大概用了1M多，每一论的波浪，都吃15%cpu。

用了自定义动画后：

加载动画后，大概用了不到1M，每一论的波浪，都吃不到5%cpu。

5. 总结

这算是自己的第一个自定义View，可能实现思路上有问题，或者大家有更好的思路，欢迎一起讨论！ 还有几个问题：

• 一般测试动画性能是怎么去测试的？上面的测试我觉得有些粗糙
• 关于优化自定义的动画性能，也就是那几点，其中有一点，说的是减少调用invalidate()的无参数方法，使用有参数的方法，但我查了一下官方文档，在API21后，有参数的方法就不管用了。还有什么别的方法优化自己的自定义动画？

源代码在此

学习分享，共勉

题外话，之前一直不注意对知识的整理，导致很多知识点学习不系统，正好最近同事和我花了一个多月的时间整理出来一份包括不限于高级UI、性能优化、移动架构师、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter等全方面的Android进阶实践技术，今天把它免费分享出来，希望能够帮助到有需要的Android工程师朋友，也省的大家再去网上花时间找资料。

资料免费领取方式：转发+关注+点赞后，加入点击链接加入群聊：Android高级开发交流群（818520403）即可获取免费领取方式！

重要的事说三遍，关注！关注！关注！