本文主要就介绍如何使用正余弦或者贝塞尔曲线实现一个类似水波纹加载的动效。如果有看前面的文章,可以知道现在使用贝塞尔曲线相对比较容易,因为Android的Path中就有贝塞尔曲线的API,可以直接使用。但是,正余弦在Path中确实没有什么API供开发者直接使用,那么只能另寻其它方式了。
先上图,俗话说一图顶千言。
正弦曲线
在Path的API中有lineTo(x,y)方法,使用Math的sin()方法,将x与y的关系建立一个正弦映射,然后将多个点使用lineTo()方法连接起来,这样所有的点的关系都是正弦映射,然后再使用Canvas的drawPath()方法,显示出的效果就是一条平滑的正弦曲线了。
在代码实现之前,先熟悉一下正弦函数公式。
正弦曲线可表示为y=Asin(ωx+φ)+k,定义为函数y=Asin(ωx+φ)+k在直角坐标系上的图象,其中sin为正弦符号,x是直角坐标系x轴上的数值,y是在同一直角坐标系上函数对应的y值,k、ω和φ是常数(k、ω、φ∈R且ω≠0)
A——振幅,当物体作轨迹符合正弦曲线的直线往复运动时,其值为行程的1/2。
ωx+φ——相位,反映变量y所处的状态。
φ——初相,x=0时的相位;反映在坐标系上则为图像的左右移动。
k——偏距,反映在坐标系上则为图像的上移或下移。
ω——角速度, 控制正弦周期(单位弧度内震动的次数)。
如下是一个简单的正弦曲线示例。
正弦函数的振幅A是20,ω是2π/50,这里为什么使用了2π/50呢,因为正弦曲线的周期是2π,这样50个单位长度就恰好是一个周期,偏距k和初相φ都是0。
接下来设计一下上面图片动效的正弦函数,首先一个屏幕内刚好是一个正弦曲线周期,垂直方向上面位于屏幕的中间位置,还可以随着时间平移,代码如下:
public float getMyValue(float x, float offset) {
return (float) Math.sin(2 * Math.PI * x / width - offset) * 40 + height