Android自定义View

admin 管理员组

文章数量: 887016

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;elsereturn 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() {@Overridepublic 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自定义View