如何实现Siri中的波纹动画

苹果手机上的siri语音波纹动画很有意思，本文将带领大家研究如何实现生动画效果。
本文中代码是基于android的Java，其他平台上可以参考算法自行实现。本文假定读者会实现自定义View，不会的同学可以自行百度，文中将不会赘述。

绘制正弦波

Siri波纹的基本型是正弦波，所以首先我们要能够绘制一条正弦波。
一切以代码说话：

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    float period = 2.0f;// 区域内，正弦波的周期

    // 将绘图原点移动到区域中心
    int width = getWidth();
    int height = getHeight();
    float midWidth = width / 2.0f;
    float midHeight = height / 2.0f;
    canvas.translate(midWidth, midHeight);

    // 初始化画笔
    Paint paint = new Paint();
    paint.setStrokeWidth(1);// 画线宽度
    paint.setStyle(Style.STROKE);//空心效果
    paint.setAntiAlias(true);//抗锯齿
    paint.setColor(Color.BLACK);

    // 初始化线条
    Path sinPath = new Path();
    sinPath.moveTo(-midWidth, 0);

    // 计算线条
    for (float x = -midWidth; x < midWidth; x++) {
        double sine = Math.sin(2 * Math.PI * period * (x / width));//计算该点上的正弦值
        float y = (float) (midHeight * sine);// 将正弦值限定到绘图区的高度上
        sinPath.lineTo(x, y);
    }

    canvas.drawPath(sinPath, paint);//绘制线条

    canvas.restore();
}

简单起见，我把所有的有效代码都放到了View.onDraw方法里面了。
这里，关键代码是这两句

double sine = Math.sin(2 * Math.PI * period * (x / width));
float y = (float) (midHeight * sine);

结合上下文，这两句话计算了x轴上对应的y值，即：

y=midHeight∗