水波浪效果如下
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地址 ：）
网友评论