iOS 开发之Core Graphics(一)初探-波纹动画

图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(二)详解－基础篇

路漫漫其修远兮，吾将上下而求索。