iOS水波动画 思路+实现

最近项目需要做水波动画，闲来无聊，把实现的思路和过程写一下。话不多说，先上效果图：

waveAnimation.gif

实现思路：

• 如何画出波浪
  由于波浪的形状和我们的正弦余弦函数一样，所以我们考虑使用三角函数图像来画线，查找苹果是否为我们提供了相应的api，很高兴我们找到了sin，cos函数：
  

  

• 水波动画理论基础

/** 
 使用正余弦画出波浪
 y=Asin(ωx+φ)+k
 y=Acos(ωx+φ)+k
 A——振幅，当物体作轨迹符合正弦曲线的直线往复运动时，其值为行程的1/2。
 (ωx+φ)——相位，反映变量y所处的状态。
 φ——初相(initial phase)，x=0时的相位；反映在坐标系上则为图像的左右移动。
 k——偏距，反映在坐标系上则为图像的上移或下移。offsetY
 ω——角速度(palstance)， 控制正弦周期(单位角度内震动的次数)。 

 正弦图像在x轴平移π/2得到余弦图像
 */

注意：屏幕的x,y轴在左上角，向下，向右为正方向

• 让波浪动起来
  让波浪在界面上产生高低起伏的效果，我们只需平移曲线图像，让它的高低谷不断出现在界面上即可，这个由初相控制。
  同时振幅控制着曲线的上下行程，所以波浪的大小由振幅决定。

• 如何时刻改变初像，和振幅让波浪动起来
  我们需要使用CADisplayLink

CADisplayLink是一个能让我们以和屏幕刷新率相同的频率将内容画到屏幕上的定时器。我们在应用中创建一个新的 CADisplayLink 对象，把它添加到一个runloop中，并给它提供一个 target 和selector 在屏幕刷新的时候调用。

下面是实现的核心：修改振幅和初相的值，画sin和cos曲线错开波浪

- (void)startWaveAnimation
{
    /** 刷屏动画 */
    _waveDisplaylink = [CADisplayLink displayLinkWithTarget:self selector:@selector(getCurrentWavestate:)];
    [_waveDisplaylink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
}

- (void)getCurrentWavestate:(CADisplayLink *)displayLink
{
    /**
     使用正弦产生水波动画
     y=Asin(ωx+φ)+k
     A——振幅，当物体作轨迹符合正弦曲线的直线往复运动时，其值为行程的1/2。
     (ωx+φ)——相位，反映变量y所处的状态。
     φ——初相，x=0时的相位；反映在坐标系上则为图像的左右移动。
     k——偏距，反映在坐标系上则为图像的上移或下移。
     ω——角速度， 控制正弦周期(单位角度内震动的次数)。
     */
    
    if (_increase) {
        _variable += 0.01;//0.01;
    }else{
        _variable -= 0.01;//0.01;
    }
    
    if (_variable<=1) {
        _increase = YES;
    }
    
    if (_variable>=1.5) {
        _increase = NO;
    }
    
    CGFloat A = _variable * (_amplitude/1.5);
    
    /** 改变初像，会改变 x 轴坐标会改变 */
    _initialPhase += _wavespeed;
    
    /** 贝塞尔曲线画正弦曲线 */
    for (int i = 0; i < self.waveLayers.count; i ++) {
        
        CAShapeLayer *layer = self.waveLayers[i];
        
        if (i == 0) {
            
            CGFloat y = _offsetY;
            UIBezierPath *path = [UIBezierPath bezierPath];
            [path moveToPoint:CGPointMake(0, _offsetY)];
            for (float x = 0.0f; x < CGRectGetWidth(self.frame); x ++) {
                
                y = A * sin(_palstance * x + _initialPhase) + _offsetY;
                [path addLineToPoint:CGPointMake(x, y)];
            }
            [path addLineToPoint:CGPointMake(CGRectGetWidth(self.frame), CGRectGetHeight(self.frame))];
            [path addLineToPoint:CGPointMake(0, CGRectGetHeight(self.frame))];
            layer.path = path.CGPath;
            
        }else {
            
            CGFloat y = _offsetY;
            UIBezierPath *path = [UIBezierPath bezierPath];
            [path moveToPoint:CGPointMake(0, _offsetY)];
            for (float x = 0.0f; x < CGRectGetWidth(self.frame); x ++) {
                
                y = A * cos(_palstance * x + ((i - 1)*0.5 + 1)*_initialPhase) + _offsetY;
                [path addLineToPoint:CGPointMake(x, y)];
            }
            [path addLineToPoint:CGPointMake(CGRectGetWidth(self.frame), CGRectGetHeight(self.frame))];
            [path addLineToPoint:CGPointMake(0, CGRectGetHeight(self.frame))];
            layer.path = path.CGPath;
        }
    }
}

通过它，我们就可以以屏幕刷新率相同的频率，刷新界面的曲线，产生波浪效果。

• 如果产生气泡
  一句话使用粒子发射引擎：CAEmitterLayer

总结：

水波动画的实现主要使用下面的知识
1、CAShapeLayer 做载体
2、贝塞尔曲线画线（UIBezierPath）
3、正弦余弦控制控制波浪形状，并错开曲线
4、CADisplayLink 刷新界面产生动画
5、粒子引擎发射气泡

源码下载