CAShapeLayer画图

iOS中画图类除了CoreGraphics，还有CAShapeLayer，且CAShapeLayer一般是与UIBezierPath连用的，如果有动画功能的话，还可以加上CAAnimation。
参考了这位大神的GitHub, 我这里只是做个个人的技术记录
https://blog.csdn.net/u013282507/article/details/53121556

简单实现以下功能

baidu1.gif

准备

正弦曲线 y=Asin(ωx+φ)+k
A: 振幅
ω: 角速度
φ: 初相
k: Y轴上的偏距

4d086e061d950a7ba5ac017c0ad162d9f3d3c9e9.jpg

如何绘制一条一直在动的曲线呢?

1. 首先要确定曲线的宽度, 即坐标系中的x坐标轴

//layerWidth
@property (nonatomic, assign)CGFloat layerWidth;

2. 有了x坐标轴, 我们要确定正弦曲线 y=Asin(ωx+φ)+k的一些参数: A,ω,φ,k; 根据这些参数我们就能求得正弦曲线 y=Asin(ωx+φ)+k的结果--y

//振幅
@property (nonatomic, assign)CGFloat amplitude;
//角速度
@property (nonatomic, assign)CGFloat polstance;
//偏移量
@property (nonatomic, assign)CGFloat offsetX;
//初相
@property (nonatomic, assign)CGFloat originY;

3. 绘制静态曲线

取得了某一点的y值, 如何连成一条曲线呢?可以采用CGPathAddLineToPoint方法将每个点串起来

for (float x = 0; x < self.layerWidth; x ++) {
        y = self.amplitude * sin(self.polstance * x + self.offsetX) + self.originY;
        CGPathAddLineToPoint(path, nil, x, y);
    }

上面这段代码就能获取到一条静态的曲线

4. 绘制动态曲线(让静态的曲线动起来)

我们知道iPhone的屏幕每秒钟刷新60次, 我们可以利用这一特性, 每次刷新改变正弦曲线在x轴的偏移量offsetX, 采用CADisplayLink

CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(makeWaveMove)];

Demo地址:https://github.com/YuePei/WaveAnimation
题外话:
CAShapeLayer + UIBezierPath + CAAnimation实现一些简单的动效, 可参考下面的一篇文章https://www.jianshu.com/p/139f4fbe7b6b