iOS 圆形水波浪效果实现
https://www.jianshu.com/p/1c947bb906cb?utm_campaign
水波浪效果如下
waterWave.gif
最近项目中用到一个小的波浪动画,查阅了一些资料如下:
网上参考的一些效果
CDNS上的原理
主要实现方法
- 水波动画的关键点就是正余弦函数
- 这个效果主要的思路是添加两条曲线 一条正弦曲线、一条余弦曲线 然后在曲线下添加深浅不同的背景颜色,从而达到波浪显示的效果
正弦型函数解析式:y=Asin(ωx+φ)+h
各常数值对函数图像的影响:
φ(初相位):决定波形与X轴位置关系或横向移动距离(左加右减)
ω:决定周期(最小正周期T=2π/|ω|)
A:决定峰值(即纵向拉伸压缩的倍数)
h:表示波形在Y轴的位置关系或纵向移动距离(上加下减)
正弦.png
我们想要绘制一条函数,这个曲线其实都是栅格的像素点组成。可以沿着假想的曲线绘制许多个点,然后把点逐一用直线连在一起,如果点足够多,就可以得到一条满足需求的曲线,这也是一种微分的思想。而这些点的位置可以通过正弦函数的解析式求得。
如果要绘制上面这个曲线,可以观察:波的峰值是1,周期是2π,初相位是0,h位移也是0。那么计算各个点的坐标公式就是y = sin(x);获得各个点的坐标之后,使用CGPathAddLineToPoint这个函数,把这些点逐一连成线,就可以得到最后的路径。
另外一条波浪使用余弦函数,同样的原理,使得2条波浪错开显示。
//绘制的部分代码
CGFloat waterWaveWidth = self.bounds.size.width;
//初始化运动路径
CGMutablePathRef path = CGPathCreateMutable();
CGMutablePathRef maskPath = CGPathCreateMutable();
//设置起始位置
CGPathMoveToPoint(path, nil, 0, _waveY);
//设置起始位置
CGPathMoveToPoint(maskPath, nil, 0, _waveY);
//初始化波浪其实Y为偏距
CGFloat y = _waveY;
//正弦曲线公式为: y=Asin(ωx+φ)+k;
for (float x = 0.0f; x <= waterWaveWidth ; x++) {
y = _waveAmplitude * sin(_wavePalstance * x + _waveX) + _waveY;
CGPathAddLineToPoint(path, nil, x, y);
}
现在 我们有了一条静态的线,那怎么让他动起来呢?
平移后的图像
我们可以让他向左或者向右平移 每隔一段时间平移一次 使用CADisplayLink 使得平移看起来更加的流畅;
//以屏幕刷新速度为周期刷新曲线的位置
_disPlayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(waveAnimation:)];
[_disPlayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
然后在利用CAShapeLayer绘制该波浪。
至此动画的基本原理就搞清楚了,具体的代码实现在demo地址 :)
作者:CoderSJun
链接:https://www.jianshu.com/p/1c947bb906cb
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。