iOS基础：上手CAShapeLayer，动画其实并不难

发表于 | 分类于 |

前言

当你看到精彩的动画时，你会不会和我一样，立马想这个效果该如何如何实现呢？然后想着想着，又觉得很难实现，然后挠挠头表示做不出来呢？如果是这样，那这篇文章也许可以帮到你哦。

纲要

纲要.png

正文

一、概念入门

1.CAShapeLayer

CAShapeLayer这个类是这篇文章的主角，继承于CALayer。CAShapeLayer的形状是由其path(类型为CGPathRef)属性指定的。
CAShapeLayer动画渲染直接提交到手机的GPU当中，相较于view的drawRect方法使用CPU渲染而言，其效率极高，能大大优化内存使用情况。也就是说：当你需要绘制图层的时候，不再需要重写自定义view的drawRect方法了。至于他的使用方法，下面会介绍。

2.UIBezierPath

UIBezierPath是在 UIKit 中的一个类，继承于NSObject,可以创建基于矢量的路径.此类是Core Graphics框架关于path的一个OC封装。所以说两者本质是相似，只是UIBezierPath更加好用。所以今天就来学习这个类。
前面有提到，CAShapeLayer的形状是由path决定的。所以可以想到，需要使用这个类来设置路径，然后把这个路径给CAShapeLayer，这样图层就算绘制好了。

3.CABasicAnimation、CAKeyframeAnimation

CABasicAnimation和CAKeyframeAnimation都是CAPropertyAnimation的子类。

CABasicAnimation概念.png

概念其实看不出什么，主要还是看使用方法。

二、使用介绍

1.CAShapeLayer

先上代码

1
2
3
4
5
6
7
8
9
10
11
CAShapeLayer *layer = [CAShapeLayer layer];
// 填充颜色
layer.fillColor = [UIColor clearColor].CGColor;
// 绘制颜色
layer.strokeColor = [UIColor greenColor].CGColor;
layer.lineCap = kCALineCapRound;
layer.lineJoin = kCALineJoinRound;
layer.lineWidth = 4;
layer.frame = self.view.bounds;
layer.path = [self circlePath].CGPath;
[self.view.layer addSublayer:layer];

这些代码我是直接在viewDidLoad里面写的。可以发现其实CAShapeLayer使用很简单，初始化后，设置基本属性，然后设置path，最后添加到layer上去。需要注意的是，path这个属性必须需要设置，不然是没有效果的。

2.UIBezierPath

a.绘制路径介绍

下面介绍UIBezierPath的使用方法。（我把UIBezierPath的绘制放到一个方法中，然后在path属性设置时调用）

a.1 圆
1
2
3
4
- (UIBezierPath *)circlePath
{
    return [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 100, 100)];
}

效果：

圆形.png

a.2矩形
1
2
3
4
- (UIBezierPath *)rectanglePath
{
    return [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 100, 100)];
}

效果：

矩形.png

a.3圆角矩形
1
2
3
4
- (UIBezierPath *)roundedPath
{
    return [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 100, 100) cornerRadius:5];
}

效果：

圆角矩形.png

a.4圆弧
1
2
3
4
- (UIBezierPath *)arcPath
{
    return [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:50 startAngle:M_PI_2 endAngle:M_PI_2*3 clockwise:YES];
}

效果：

圆弧.png

注意：
这里的startAngle是从这个圆的最右边那个点开始的。所以如果要绘制上半个圆，startAngle就是M_PI，endAngle就是2*M_PI。
clockwise这个属性设置是否顺时针，若为YES，则顺时针绘制。

a.5一级贝塞尔
1
2
3
4
5
6
7
8
- (UIBezierPath *)classOneBezierPath
{
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(20, 100)];
    // 给定终点和两个控制点绘制贝塞尔曲线
    [path addQuadCurveToPoint:CGPointMake(220, 100) controlPoint:CGPointMake(120, 200)];
    return path;
}

效果：

一级贝塞尔.png

a.6二级贝塞尔
1
2
3
4
5
6
7
8
- (UIBezierPath *)classTwoBezierPath
{
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(20, 100)];
    // 给定终点和两个控制点绘制贝塞尔曲线
    [path addCurveToPoint:CGPointMake(220, 100) controlPoint1:CGPointMake(120, 20) controlPoint2:CGPointMake(120, 180)];
    return path;
}

效果：

二级贝塞尔.png

a.7DIY
1
2
3
4
5
6
7
8
9
10
11
12
- (UIBezierPath *)DIYPath
{
    UIBezierPath *DIYPath = [UIBezierPath bezierPath];
    
    [DIYPath moveToPoint:CGPointMake(100, 100)];
    [DIYPath addLineToPoint:CGPointMake(100, 200)];
    [DIYPath addLineToPoint:CGPointMake(80, 170)];
    [DIYPath moveToPoint:CGPointMake(100, 200)];
    [DIYPath addLineToPoint:CGPointMake(120, 170)];
    
    return DIYPath;
}

效果：

diy.png

b.细节

b.1 线宽对绘制的影响

仔细看a.1和a.2的效果，也就是圆形和矩形，可以发现，这两个图形的顶部和左部有一小部分在外面。而导致一个现象的原因就是线宽了。
以a.1举例，path不变，设置 layer.lineWidth = 40;这时线宽为40。效果如下：

线宽为40的圆.png
效果图中红线是我自己加上去，其实这个红线才是我们设置的路径。然后由于线宽为40，所以系统默认红线左右两边都20。
同理，线宽为40的矩形效果图：(左部和顶部有20像素没显示出来)

线宽为40的矩形.png

b.2 不同的形状，不同的开始绘制点

在我做动画的时候，发现不同的路径，开始绘制点也会不同，所以导致动画不如意。下面我们来看看这个属性。
CAShapeLayer有两个属性：strokeStart和strokeEnd。分别为开始绘制点和结束绘制点。这两个属性类似，我们以strokeStart来解释。
strokeStart默认为0，最大值为1。若strokeStart设置为0.5，也就是说从这个路径的50%处开始绘制。
下面我们来通过效果分析：
首先，我们在view中添加一个slider，然后滑动slider来改变layer.strokeStart。看看效果:

圆形的strokeStart.gif

矩形的strokeStart.gif

贝塞尔的strokeStart.gif

自定义的strokeStart.gif
不难发现，圆形的开始绘制点是从最左侧那个点开始，矩形是左上角那个点，贝塞尔是从左侧开始，而自定义的得根据你绘制的开始点。

1
2
3
4
5
6
7
8
9
10
11
12
- (UIBezierPath *)DIYPath
{
    UIBezierPath *DIYPath = [UIBezierPath bezierPath];
    
    [DIYPath moveToPoint:CGPointMake(100, 100)];
    [DIYPath addLineToPoint:CGPointMake(100, 200)];
    [DIYPath addLineToPoint:CGPointMake(80, 170)];
    [DIYPath moveToPoint:CGPointMake(100, 200)];
    [DIYPath addLineToPoint:CGPointMake(120, 170)];
    
    return DIYPath;
}

从代码看出这个自定义路径是开始点为(100, 100)。绘制的步骤为从最顶点到最底点，再到左侧点。然后又从最底点到右侧点。观察效果图发现确实是如此。

3.CABasicAnimation、CAKeyframeAnimation

我在view上加了一个开始动画按钮，点击开始动画。

1
2
3
4
- (void)startAnimate
{
    [self.layer addAnimation:[self pathBasicAnimate] forKey:@"animate"];
}

和上面一样，我把动画的使用也放在方法中，需要用时直接调用。

3.1CABasicAnimation使用方法

3.1.a keyPath为path的BasicAnimate
1
2
3
4
5
6
7
8
9
- (CABasicAnimation *)pathBasicAnimate
{
    CABasicAnimation *animate = [CABasicAnimation animationWithKeyPath:@"path"];
    animate.removedOnCompletion = NO;
    animate.duration = 2;
    animate.fillMode = kCAFillModeForwards;
    animate.toValue = (__bridge id _Nullable)([self classTwoBezierPath].CGPath);
    return animate;
}

效果：

keyPath为path的BasicAnimate.gif

3.1.b keyPath为position的BasicAnimate
1
2
3
4
5
6
7
8
9
- (CABasicAnimation *)positionBasicAnimate
{
    CABasicAnimation *animate = [CABasicAnimation animationWithKeyPath:@"position"];
    animate.removedOnCompletion = NO;
    animate.duration = 1;
    animate.fillMode = kCAFillModeForwards;
    animate.toValue = [NSValue valueWithCGPoint:CGPointMake(self.view.frame.size.width/2 + 100, self.view.frame.size.height/2)];
    return animate;
}

效果：

keyPath为position的BasicAnimate.gif

3.1.c keyPath为transform.rotation.z的BasicAnimate
1
2
3
4
5
6
7
8
9
- (CABasicAnimation *)rotationBasicAnimate
{
    CABasicAnimation *animate = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    animate.removedOnCompletion = NO;
    animate.duration = 1;
    animate.fillMode = kCAFillModeForwards;
    animate.toValue = @(M_PI*2);
    return animate;
}

效果

keyPath为rotation的BasicAnimate.gif

3.1.d CABasicAnimation的使用总结

认真对比上面的代码，发现CABasicAnimation的使用其实很简单。首先清楚自己需要怎么样的动画，是需要位移，还是旋转，还是改变绘制路径等等。然后找到对应的属性并初始化。
CABasicAnimation *animate = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
然后设置该动画的持续时间
animate.duration = 1;
设置动画结束后是否还原

1
2
animate.removedOnCompletion = NO;
animate.fillMode = kCAFillModeForwards;

然后设置KeyPath终止时的值
animate.toValue = (__bridge id _Nullable)([self classTwoBezierPath].CGPath);
这样，简单的动画就做好了。

####3.2 CAKeyframeAnimation使用方法
前面的基本动画只是单一的动画，如果你要改变一个layer的很多次path，或者多次改变layer的position，就可以使用CAKeyframeAnimation。

1
2
3
4
5
6
7
8
9
10
11
12
13
- (CAKeyframeAnimation *)keyframeAnimation
{
    CAKeyframeAnimation *keyframeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"path"];
    keyframeAnimation.duration = 3;
    keyframeAnimation.values = @[(__bridge id)[self classOneBezierPath].CGPath,
                                 (__bridge id)[self classTwoBezierPath].CGPath,
                                (__bridge id)[self arcPath].CGPath,
                                (__bridge id)[self DIYPath].CGPath];
    keyframeAnimation.keyTimes = @[@(0.25), @(0.5), @(0.75), @(1)];
    keyframeAnimation.fillMode = kCAFillModeForwards;
    keyframeAnimation.removedOnCompletion = NO;
    return keyframeAnimation;
}

可以看到还是类似，找到动画对应的属性，设置动画的属性。不同的是这里需要设置values属性。因为你需要的动画更复杂了对吧。
看看效果:

keyframeAnimation.gif
其他layer的属性也是类似的，就不一一举例了。

3.3 CAAnimationGroup使用方法

这个是顺带一提的，使用也很简单。当你需要既改变layer的path，又改变他的position时，使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
- (CAAnimationGroup *)animationGroup
{
    CABasicAnimation *animate = [CABasicAnimation animationWithKeyPath:@"position"];
    animate.removedOnCompletion = NO;
    animate.fillMode = kCAFillModeForwards;
    animate.toValue = [NSValue valueWithCGPoint:CGPointMake(self.view.frame.size.width/2 + 100, self.view.frame.size.height/2)];
    
    
    CAKeyframeAnimation *keyframeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"path"];
    keyframeAnimation.values = @[(__bridge id)[self classOneBezierPath].CGPath,
                                 (__bridge id)[self classTwoBezierPath].CGPath,
                                 (__bridge id)[self arcPath].CGPath,
                                 (__bridge id)[self DIYPath].CGPath];
    keyframeAnimation.keyTimes = @[@(0.25), @(0.5), @(0.75), @(1)];
    keyframeAnimation.fillMode = kCAFillModeForwards;
    keyframeAnimation.removedOnCompletion = NO;
    
    
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations = @[animate, keyframeAnimation];
    group.removedOnCompletion = NO;
    group.fillMode = kCAFillModeForwards;
    group.duration = 3;
    return group;
}

把你需要的动画放到数组中，然后赋值给group.animations。
效果：

animationGroup.gif

3.4 动画细节点

看效果图时你会发现，在改变path的时候，不是很好看。其实执行path的动画时，系统默认将上一个path的开始点设为对应下一个path的开始点。仔细观察效果图，可以看到第一个path为贝塞尔，最左侧为绘制开始点，然后这个点始终是接下去任何一个path的开始点，所以他会不规则的动来动去。结束点也是如此。

总结

到这里就全部介绍完了。当你看到一个复杂的动画时，把他分解开来，然后一个个部分设置动画，就肯定能做出来。
本文代码：github

实战1：动画实战：自定义下拉刷新控件
实战2：动画实战：自定义提醒控件AlertView
实战3：动画实战：自定义转场动画实现

请我吃一块黄金鸡块