iOS非标准正弦波浪线

标准正弦波浪曲线函数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;
    }
}

效果如下：

标准正弦波浪线.gif

上面代码中的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的图像如下：

y = sinx的图像.png

波浪效果如下：

非标准正弦波浪线.gif

• 虚线画法

使用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)]的第一个数表示虚线当中每个实线部分的长度，第二个数表示虚线当中每个空白部分的长度
效果如下：

虚线.png

那么怎么画彩色相间的虚线呢？
这里采用的办法就是画两条颜色不同的虚线叠加在一起(路径一样).

    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;

效果如下：

虚线2.png

这不是我们想要的效果，绿色虚线盖住了红色虚线，原因是两条虚线的起点一样，所以虚线部分和实线部分完全重叠。解决办法就是让绿色虚线的起点左移或右移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;

效果如下：

彩色虚线.png