效果图
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];
}
