原理

• 利用 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;// 给视图添加ShapeLayerself.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;
}

效果如图：

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

- (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;
}

效果如图：

• 利用 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;
}

效果如图:

• 结束动画

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

相关demo下载:

https://github.com/Jae-sun/SJUserCenterHeader.git