标准正弦波浪曲线函数f(x) = Asin(ωx + ψ) + D
A表示振幅决定峰值，A越大波浪越陡，A为0时无波浪为直线。
ω决定周期，周期T= 2π/ω。ω越大周期越小波浪越密集
ψ控制正弦波浪曲线在x轴方向上的平移
D控制波浪曲线在y轴方向上的平移
-
标准正弦波浪曲线
使用CAShapeLayer画静态的正弦波浪线，使用CADisplayLink改变ψ(下面的offset属性)的值使得波浪线横向平移。
#define scrW ([UIScreen mainScreen].bounds.size.width)
#import "WaveViewController.h"
@interface WaveViewController ()
@property (nonatomic,strong) CADisplayLink *display; //定时器
@property (nonatomic,assign) CGFloat offset; //x方向位移
@property (nonatomic,strong) CAShapeLayer *shapLayer;
@end
@implementation WaveViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self setupUI];
}
-(void)viewDidDisappear:(BOOL)animated{
[super viewDidDisappear:animated];
[self.display invalidate];
self.display = nil;
}
-(void)setupTimer{
self.shapLayer = [CAShapeLayer layer];
self.shapLayer.fillColor = [UIColor redColor].CGColor;
[self.view.layer addSublayer:self.shapLayer];
CADisplayLink *display = [CADisplayLink displayLinkWithTarget:self selector:@selector(drawWaveLine)];
[display addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];
self.display = display;
self.offset = 0;
}
-(void)drawWaveLine
{
//创建一个路径
CGMutablePathRef path = CGPathCreateMutable();
CGFloat y = 100;
//将点移动到 x=0,y=currentK的位置
CGPathMoveToPoint(path, nil, 0, y);
for (NSInteger x = 0.0f; x<=scrW; x++) {
//标准正玄波浪公式
y = (20) * sin((1/30.0)*x+ self.offset)+100;
//将点连成线
CGPathAddLineToPoint(path, nil, x, y);
}
CGPathAddLineToPoint(path, nil, scrW, self.view.frame.size.height);
CGPathAddLineToPoint(path, nil, 0, self.view.frame.size.height);
CGPathCloseSubpath(path);
self.shapLayer.path = path;
CGPathRelease(path);
self.offset += 0.1;
if (self.offset > 60*M_PI) {
self.offset = 0;
}
}
效果如下：
上面代码中的self.offset用于控制波浪线左右移动，如果offset固定不变，那么就是一条静止的波浪线。由于我不想让offset的值无限增大，所以我加了一个判断将其置为0。
-
非标准正弦波浪曲线
上面的波浪曲线每个波峰和波谷的高度都是一样的，而像Siri下面的语音波浪线波峰波谷都不一样，越往两边峰值越小趋近于0，越往中间峰值越大。其实这是若干个正弦函数叠加在一起的效果，相乘或相加都可以得到不同的效果，我们这里使用相乘的方式。只需要将以上的代码修改一句即可，将y = (20) * sin((1/30.0)x+ self.offset)+100;改为y = 3 * sin((M_PI/scrW)x) * (20 * sin((1/30.0)x + self.duration)) + 100;就可以得到想要的效果。
这里我乘上了另一个正弦函数3 * sin((M_PI/scrW)x)。
其中3表示将振幅放大3倍，M_PI/scrW表示函数周期为2*scrW，这样当x=0时y=0，x=scrW时y=0,x=scrW/2时y=3,是一个先递增后递减的函数，这样就能达到两端趋近于0，中间波峰变大了。
其中y=sinx的图像如下：
波浪效果如下：
-
虚线画法
使用CAShapeLayer画虚线很简单，只多一个步骤，就是设置lineDashPattern属性
self.shapLayer = [CAShapeLayer layer];
self.shapLayer.fillColor = [UIColor clearColor].CGColor;
self.shapLayer.strokeColor = [UIColor redColor].CGColor;
self.shapLayer.lineWidth = 4;
self.shapLayer.lineDashPattern = @[@(8),@(8)]; //设置虚线
[self.view.layer addSublayer:self.shapLayer];
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 100)];
[path addLineToPoint:CGPointMake(300, 100)];
self.shapLayer.path = path.CGPath;
数组@[@(8),@(8)]的第一个数表示虚线当中每个实线部分的长度，第二个数表示虚线当中每个空白部分的长度
效果如下：
那么怎么画彩色相间的虚线呢？
这里采用的办法就是画两条颜色不同的虚线叠加在一起(路径一样).
self.shapLayer = [CAShapeLayer layer];
self.shapLayer.fillColor = [UIColor clearColor].CGColor;
self.shapLayer.strokeColor = [UIColor redColor].CGColor;
self.shapLayer.lineWidth = 4;
self.shapLayer.lineDashPattern = @[@(8),@(8)]; //设置虚线
[self.view.layer addSublayer:self.shapLayer];
self.shapLayer2 = [CAShapeLayer layer];
self.shapLayer2.fillColor = [UIColor clearColor].CGColor;
self.shapLayer2.strokeColor = [UIColor greenColor].CGColor;
self.shapLayer2.lineWidth = 4;
self.shapLayer2.lineDashPattern = @[@(8),@(8)];
[self.view.layer addSublayer:self.shapLayer2];
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 100)];
[path addLineToPoint:CGPointMake(300, 100)];
self.shapLayer.path = path.CGPath;
self.shapLayer2.path = path.CGPath;
效果如下：
这不是我们想要的效果，绿色虚线盖住了红色虚线，原因是两条虚线的起点一样，所以虚线部分和实线部分完全重叠。解决办法就是让绿色虚线的起点左移或右移8个点，这里我让绿色虚线的起点右移8个点
self.shapLayer = [CAShapeLayer layer];
self.shapLayer.fillColor = [UIColor clearColor].CGColor;
self.shapLayer.strokeColor = [UIColor redColor].CGColor;
self.shapLayer.lineWidth = 4;
self.shapLayer.lineDashPattern = @[@(8),@(8)]; //设置虚线
[self.view.layer addSublayer:self.shapLayer];
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 100)];
[path addLineToPoint:CGPointMake(300, 100)];
self.shapLayer.path = path.CGPath;
self.shapLayer2 = [CAShapeLayer layer];
self.shapLayer2.fillColor = [UIColor clearColor].CGColor;
self.shapLayer2.strokeColor = [UIColor greenColor].CGColor;
self.shapLayer2.lineWidth = 4;
self.shapLayer2.lineDashPattern = @[@(8),@(8)];
[self.view.layer addSublayer:self.shapLayer2];
UIBezierPath *path2 = [UIBezierPath bezierPath];
[path2 moveToPoint:CGPointMake(8, 100)]; //右移8个点
[path2 addLineToPoint:CGPointMake(300, 100)];
self.shapLayer2.path = path2.CGPath;
效果如下：
