正弦水波纹波动画 - SJWaveView

效果图

UserCenter.gif

原理

• 利用 UIBezierPath + CAShapeLayer 画正弦线
• 利用 CADisplayLink 重复执行画正弦线
• 下一次画的正弦线较前一次次平移小段距离，不断重复，就形成了波浪效果(动画效果实现核心)

实现过程

• 先复习一下正弦函数

/**
 * *** 正弦波的基础知识  ***
 *
 *  f(x) = Asin(ωx+φ)+k
 *
 *  A    为振幅, 波在上下振动时的最大偏移
 *
 *  φ/w  为在x方向平移距离
 *
 *  k    y轴偏移，即波的振动中心线y坐标与x轴的偏移距离
 *
 *  2π/ω 即为波长，若波长为屏幕宽度即， SCREEN_W = 2π/ω, ω = 2π/SCREEN_W
 */

• 自定义一个UIView视图，利用UIBezierPath + CAShapeLayer 画正弦线

// 给视图添加ShapeLayer
-(void)starWave {
   // 设置正弦线的振幅
    self.waveAmplitude = 0.5 * self.wave_H;
    // 给视图添加ShapeLayer
    self.shapeLayer = [CAShapeLayer layer];
    self.shapeLayer.borderWidth = 1; // 线宽
    self.shapeLayer.strokeColor = [UIColor redColor].CGColor; // 线的颜色
    [self.layer addSublayer:self.shapeLayer];
    [self setShapeLayerPath];
 }   
// 把正弦线加到视图中  
- (void)setShapeLayerPath {
   self.shapeLayer.path = [self sineBezierPath].CGPath;
 }
// 画正弦线 每次调用sinf函数都确定一个正弦线经过的点
- (UIBezierPath *)sineBezierPath {
     UIBezierPath *path = [UIBezierPath bezierPath];
     // 起点
    [path moveToPoint:CGPointMake(0, self.wave_H * 0.5)];
    CGFloat y = 0.0f;
    for (float x = 0.0f; x <= self.wave_W; x++) {
        // 振幅 A = self.waveAmplitude 为视图的一半
        // 波长 2π/w = (2 * MP_PI / (2 * M_PI / 200)) = 200 波长为 200
        // y轴偏移 k = self.wave_H - self.waveAmplitude， 坐标轴起点为左上, k决定正弦线中心线的偏移，振幅变小时正弦线的一直贴着视图最下边
        y = self.waveAmplitude * sinf((2 * M_PI / 200) * x) + self.wave_H - self.waveAmplitude;
        [path addLineToPoint:CGPointMake(x, y)];
    }
    return path;
}

效果如图： 正玄线.png

我们需要的是让正弦图像封闭起来，所以去了边线颜色，加填充颜色, 起点要改为左下，终点改为右下

- (void)starWave {
    self.shapeLayer.fillColor = [UIColor blueColor].CGColor; // 填充色
}
// 画正弦线
- (UIBezierPath *)sineBezierPath {   
    [path moveToPoint:CGPointMake(0, self.wave_H)]; // 起始点
   ...
    [path addLineToPoint:CGPointMake(self.wave_W, self.wave_H)]; // 结束点
    [path closePath]; // 使封闭
    return path;
} 

效果如图：

正玄波.png

• 利用 CADisplayLink 重复执行画正弦线，配合正弦线偏移让正弦线动起来

-(void)starWave {
  ...
  //【**波动画关键**】 一秒执行60次（算是CADisplayLink特性），即每一秒执行 setShapeLayerPath 方法60次
  self.displaylink = [CADisplayLink displayLinkWithTarget:self selector:@selector(setShapeLayerPath)];
  [self.displaylink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
}
    
- (void)setShapeLayerPath {
   self.offsetX += (self.wave_W / 60); // 正弦线偏移 , 每秒偏移 self.wave_W
    ...
}
- (UIBezierPath *)sineBezierPath {
    y = self.waveAmplitude * sinf((2 * M_PI / 200) * (x + self.offsetX/*添加偏移*/))+ self.waveAmplitude;
}

效果如图:

wave.gif

• 结束动画

- (void)stopWave {
    [self.displaylink invalidate];
    [self.shapeLayer removeFromSuperlayer];
}

源码下载