android 声波曲线动画,(自定义view实现）音量波形图

标签： 自定义view 音量波形 音波

本文目的：主要是记录自己在实现自定义view的时候，一些思路和解决方案。

目标

音量波形图

绘制两个音量波形，并且能够向右运动，上面的波形移动速度慢，下面的波形移动速度快，并且振幅能够根据音量的高低进行改变。

分解目标

先考虑静止状态，上图有两个波形图，现只考虑一个波形图，每个波形图类似于两个正弦函数的闭合。所以我们第一步要绘制一个正弦图形。

正弦函数图像

绘制正弦函数

关于自定义view的图形绘制，一般都需要onMeasure，onLayout，onDraw三个步骤。由于是自定义view，而不是viewGroup，所以并不需要实现onLayout方法。

在绘制之前，要在onMeasure方法里，计算出画布的高度、宽度、中心点等需要计算的变量，这里就不详细说明了。

为了便于绘制图形正弦函数，要把画布的坐标原点移动到绘制view的中间位置。

也就是下图中标明的点，这样坐标原点(0,0)，就位于view的中间，便于函数计算。

正弦函数方法参考：

private double sine(float x, int period, float drawWidth) {

return Math.sin(2 * Math.PI * period * x / drawWidth);

}

其中period为在画布里有多少个周期，假设period为3，就是在画布里有三个周期。drawWidth为画布宽度。

在ondraw 方法里进行绘制。

这里调用drawsine方法

private void drawSine(Canvas canvas, Path path, Paint paint, int period, float drawWidth, float amplitude) {

float halfDrawWidth = drawWidth / 2f;

path.reset();

path.moveTo(-halfDrawWidth, 0);//将绘制的起点移动到最左边

float y;

for (float x = -halfDrawWidth; x <= halfDrawWidth; x++) {

y = (float) sine(x, period, drawWidth) * amplitude;

path.lineTo(x, y);

}

canvas.drawPath(path, paint);

can