Android 自定义 View | 波浪动效

相关推荐：

• Android 自定义 View | 扭曲动效
• Android 自定义 View | 指示牌弹出动效
• Android 源码阅读 | Handler

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后，有参数的方法就不管用了。还有什么别的方法优化自己的自定义动画？

源代码在此

---

码字不易，方便的话素质三连，或者关注我的公众号 技术酱，专注 Android 技术，不定时推送新鲜文章，如果你有好的文章想和大家分享，欢迎关注投稿！