苹果手机上的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∗