写在前面

最近在找工作，安装了某勾网 APP，登录后看到用户信息绿色背板那骚气的波浪。

某勾的波浪

让我看看性能如何，在开发者模式里开启了 GPU 渲染情况信息展示。

性能很好

好，自己也写一个。

百度了一下正弦曲线的画法

整条正弦曲线是由 N 多条竖线排列起来组合而成。
onDraw 代码如下：

// 振幅
int amplitude = 20;

int height = getHeight();
// 波长
int width = getWidth();
int index = 0;

while (index < width) {
    float endY = (float) (Math.sin((float) index / (float) width * 2f * Math.PI + mTheta) * (float) amplitude + height - amplitude);
    canvas.drawLine(index, 0, index, endY, mPaint);
    index++;
}

看下性能：

惨不忍睹

非常明显，百度上的文章抄来抄去，错了大家一起错，在 onDraw 方法里执行成百上千次 canvas.drawXXX 方法，性能不差才怪。

改良方法

我试着用 Path 绘制路径这个 API。onDraw 代码如下：

// 振幅
int amplitude = 20;

int height = getHeight();
// 波长
int width = getWidth();
int index = 0;

mPath.reset();
mPath.moveTo(0, 0);
while (index <= width) {
    float endY = (float) (Math.sin((float) index / (float) width * 2f * Math.PI + mTheta)
          * (float) amplitude + height - amplitude);
    mPath.lineTo(index, endY);
    // Log.e("xxx", String.format("(%.4f, %.4f)", (float) index, endY));
    index++;
}
mPath.lineTo(index - 1, 0);
mPath.close();

canvas.drawPath(mPath, mPaint);

看下性能如何：

还可以

onDraw 里只有一次 drawXXX 方法，性能已经达标，接下来定时修改那个 mTheta 变量，波浪就会动起来了。

总结

百度虽好，可不能照搬照抄。

源码放置了自定义 View 集合，找到 WaveView 那个类就可以看到了。
GitHub 地址