图1-1-波浪动画.gif
前言
本篇是CoreGraphics系列文章的第一篇，本片不详细讲解Core Graphics的基础，只是通过一个波纹的动画，侧面的引入，浅尝辄止。这个案例主要涉及了Core Graphics中的CGMutablePathRef，还涉及到CAShapeLayer，CADisplayLink定时器以及正弦函数。
正文
在正式开始讲解波浪动画前，我们先来了解几个概念：
- CGMutablePathRef：绘图路径，带有Ref后缀的类型是Core Graphics中用来模拟面向对象机制的C结构。带有Ref后缀的类型的对象可能具有指向其他Core Graphics“对象”的强引用指针，并且成为这些“对象”的拥有者，但是ARC无法识别这类强引用和“对象”的所有权，必须在使用完之后手动释放。规则是，如果使用名称中带有create或者copy的函数创建了一个Core Graphics“对象”，就必须调用对应的Release函数并传入该对象的指针。
- CADisplayLink：也是一个定时器，适用于UI的不停刷新，如自定义动画引擎或者视频的渲染。CADisplayLink 对象注册到Runloop之后。屏幕刷新的时候定时器就会被触发。iOS设备的刷新频率是60HZ也就是60帧，即每秒刷新60次，也可以通过设置CADisplayLink 的frameInterval属性为2那么屏幕刷新两帧定时器才会触发一次。iOS 10之后新添加了属性preferredFramesPerSecond，意思是每秒触发多少次。
- CAShapeLayer: 是一个本身没有形状的图层，他的形状来源于你给定的Path，它依附于path,所以必须给定path，即使path不完整也会自动收尾相接。
- 正弦函数：y =Asin（ωx+φ）+C
A叫做振幅；
T=2π/w 叫做周期（如图1-2 表示一个周期），设置w可以确定视图中波浪线的个数；
图1-2 正弦函数的一个周期.png
wx+φ叫做相位，φ叫做初相。由y =A sinωx+C 到y =Asin（ωx+φ）+C需要平移的单位数为φ/w而不是φ。我们可以φ这个变量来间接调整波浪的流动；
C表示波浪纵向的位置，也就是使用这个变量来调整波浪在屏幕中竖直的位置。
接下来就可以直接上代码了：
属性：
@property (nonatomic, strong) CADisplayLink *waveDisplaylink;
@property (nonatomic, strong) CAShapeLayer *firstWaveLayer;
@property (nonatomic, strong) CAShapeLayer *secondWaveLayer;
基本变量：
{
CGFloat waveA;//第一个波浪图层的水纹振幅A
CGFloat waveB;//第二个波浪图层的水纹振幅B
CGFloat waveW ;//水纹周期
CGFloat offsetXA; //第一个波浪图层的位移A
CGFloat offsetXB;//第二个波浪图层的位移B
CGFloat currentK; //当前波浪高度Y
CGFloat waveSpeedA;//第一个波浪图层的水纹速度A
CGFloat waveSpeedB;//第二个波浪图层的水纹速度B
CGFloat waterWaveWidth; //水纹宽度
}
注：属性和基础变量都写在了自定义的WaveView的.m文件中，如果你想将它作为工具类，随时改变波纹的一些属性和变量，你可以将其暴露在头文件中，以便在需要引入它的地方方便修改。
WaveView的初始化：
-(id)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor colorWithRed:223/255.0 green:22/255.0 blue:64/255.0 alpha:1];
self.layer.masksToBounds = YES;
[self setUp];
}
return self;
}
-(void)setUp
{
//设置波浪的宽度
waterWaveWidth = self.frame.size.width;
//设置周期影响参数，2π/waveW是一个周期
waveW = 1/30.0;
//设置波浪纵向位置
currentK = self.frame.size.height*0.5;//屏幕居中
/*
*初始化第一个波纹图层
*/
_firstWaveLayer = [CAShapeLayer layer];
//设置填充颜色
_firstWaveLayer.fillColor = [UIColor colorWithRed:52/255.0 green:98/255.0 blue:176/255.0 alpha:1.0].CGColor;
//添加到view的layer上
[self.layer addSublayer:_firstWaveLayer];
//设置波纹流动速度
waveSpeedA = 0.3;
//设置波纹振幅
waveA = 10;
//初始化偏移量影响参数，平移的单位为offsetXA/waveW,而不是offsetXA
offsetXA = 0;
/*
*初始化第二个波纹图层
*/
//初始化
_secondWaveLayer = [CAShapeLayer layer];
//设置填充颜色
_secondWaveLayer.fillColor = [UIColor colorWithRed:32/255.0 green:78/255.0 blue:156/255.0 alpha:1.0].CGColor;
//添加到view的layer上
[self.layer addSublayer:_secondWaveLayer];
//设置波纹流动速度
waveSpeedB = 0.2;
//设置波纹振幅
waveB = 10;
//初始化偏移量影响参数，平移的单位为offsetXB/waveW,而不是offsetXB
offsetXB = 1;
/*
*启动定时器
*/
_waveDisplaylink = [CADisplayLink displayLinkWithTarget:self selector:@selector(getCurrentWave:)];
_waveDisplaylink.frameInterval = 2;//设置定时器刷新的频率
[_waveDisplaylink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];//添加到RunLoop中
}
实现波纹动画：
#pragma mark 实现波纹动画
-(void)getCurrentWave:(CADisplayLink *)displayLink
{
//实时的位移waveSpeedA/waveW
offsetXA += waveSpeedA;
offsetXB += waveSpeedB;
[self setCurrentWaveLayerPath];
}
//重新绘制波浪图层
-(void)setCurrentWaveLayerPath
{
//创建一个路径
CGMutablePathRef path = CGPathCreateMutable();
CGFloat y = currentK;
//将点移动到 x=0,y=currentK的位置
CGPathMoveToPoint(path, nil, 0, y);
for (NSInteger x = 0.0f; x<=waterWaveWidth; x++) {
//正玄波浪公式
y = waveA * sin(waveW * x+ offsetXA)+currentK;
//将点连成线
CGPathAddLineToPoint(path, nil, x, y);
}
CGPathAddLineToPoint(path, nil, waterWaveWidth, self.frame.size.height);
CGPathAddLineToPoint(path, nil, 0, self.frame.size.height);
CGPathCloseSubpath(path);
_firstWaveLayer.path = path;
//创建一个路径
CGMutablePathRef path1 = CGPathCreateMutable();
//将点移动到 x=offsetXB/waveW=30,y=currentK的位置
CGPathMoveToPoint(path1, nil, 0, y);
for (NSInteger x = 0.0f; x<=waterWaveWidth; x++) {
//正玄波浪公式
y = waveB * sin(waveW * x+ offsetXB)+currentK;
//将点连成线
CGPathAddLineToPoint(path1, nil, x, y);
}
CGPathAddLineToPoint(path1, nil, waterWaveWidth, self.frame.size.height);
CGPathAddLineToPoint(path1, nil, 0, self.frame.size.height);
CGPathCloseSubpath(path1);
_secondWaveLayer.path = path1;
CGPathRelease(path);
CGPathRelease(path1);
}
销毁定时器：
#pragma mark 销毁定时器
-(void)dealloc
{
[_waveDisplaylink invalidate];
}
将WaveView加到控制器上：
- (void)viewDidLoad {
[super viewDidLoad];
//实例化WaveView
WaveView *waveView = [[WaveView alloc] initWithFrame:CGRectMake(self.view.frame.size.width/4, (self.view.frame.size.height-self.view.frame.size.width/2)/2, self.view.frame.size.width/2, self.view.frame.size.width/2)];
waveView.layer.cornerRadius = self.view.frame.size.width/4;
[self.view addSubview:waveView];
}
源码已上传至fenglinyunshi-git，欢迎下载，并提出宝贵意见。
结语
本片并没有详细的介绍有关Core Graphics的基础知识，只是通过一个波纹的动画来窥探他的一角，后面会陆续的循序渐进的介绍有关Core Graphics的一些API和代码实现。
本篇文章的续篇已出，如果感兴趣欢迎点击下面链接：
Core Graphics(二)详解－基础篇
路漫漫其修远兮，吾将上下而求索。
