CAShapeLayer 学习和实践

发表于 | 分类于 | | 阅读次数 |

介绍

CAShapeLayer是一个通过矢量图形而不是bitmap来绘制的图层子类。你指定诸如颜色和线宽等属性，用CGPath来定义想要绘制的图形，最后CAShapeLayer就自动渲染出来了。当然，你也可以用Core Graphics直接向原始的CALyer的内容中绘制一个路径，相比直下，使用CAShapeLayer有以下一些优点：

  • 渲染快速。CAShapeLayer使用了硬件加速，绘制同一图形会比用Core Graphics快很多。
  • 高效使用内存。一个CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形，所以无论有多大，都不会占用太多的内存。
  • 不会被图层边界剪裁掉。一个CAShapeLayer可以在边界之外绘制。你的图层路径不会像在使用Core Graphics的普通CALayer一样被剪裁掉（如我们在第二章所见）。
  • 不会出现像素化。当你给CAShapeLayer做3D变换时，它不像一个有寄宿图的普通图层一样变得像素化。

其实个人理解就是比CALayer更自由，高度自定义化。

实践

现在我们要实现这样一个进度条，先看看效果。
圆形进度条.gif

思路

  1. 创建一个CAShapeLayer作为底部的圆环，暂且命名为：_trackLayer
  2. 创建一个CAShapeLayer作为进度条，暂且命名为：_progressLayer
  3. 创建一个动画来控制_progressLayer变化
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
26
27
28
29
30
31
32
33
34
35
36
37
38
@interface CircularProgressViewController ()
{
CAShapeLayer *_trackLayer;  
CAShapeLayer *_progressLayer;
}
- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
CGFloat ViewWith = CGRectGetWidth(self.view.frame);
//获取中心点
CGPoint position = self.view.center;
//设置layer的path。需要注意的是：ArcCenter是针对下面layer你设置位置之后的中心点。
//比如说： _trackLayer.bounds 设置的是（0，0，200，200）ArcCenter是（0，0）。那么圆会在_trackLayer的左上角，而不是当前页面的左上角。如果是（100，100），那么圆就会出现在layer的中心点。这个很容易搞混
//所以说，他的位置是相对于父视图的。
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(ViewWith / 2, ViewWith / 2) radius:ViewWith / 2 - 10 startAngle:- M_PI_2 endAngle:M_PI_2 * 3 clockwise:YES];
_trackLayer = [CAShapeLayer layer];
_trackLayer.bounds = CGRectMake(0, 0, ViewWith, ViewWith);
_trackLayer.position = position;
_trackLayer.lineCap = kCALineCapRound;  //线闭合时的样式
_trackLayer.strokeColor = [UIColor greenColor].CGColor;  //轨迹颜色
_trackLayer.fillColor = [UIColor clearColor].CGColor;  //空心颜色
_trackLayer.lineWidth = 10;  //线的粗细
_trackLayer.path = path.CGPath; 
[self.view.layer addSublayer:_trackLayer];
_progressLayer = [CAShapeLayer layer];
_progressLayer.bounds = CGRectMake(0, 0, ViewWith, ViewWith);
_progressLayer.position = CGPointMake(CGRectGetWidth(_trackLayer.bounds) / 2, CGRectGetWidth(_trackLayer.bounds) / 2);
_progressLayer.strokeColor = [UIColor redColor].CGColor;
_progressLayer.fillColor = [UIColor clearColor].CGColor;
_progressLayer.lineCap = kCALineCapRound;
_progressLayer.lineWidth = 10;
_progressLayer.path = path.CGPath;
_progressLayer.strokeEnd = 0;
[_trackLayer addSublayer:_progressLayer];
}

那么截止到这里，你应该在屏幕上的正中间看到一个绿色的轨迹了。那么我们设置的红色的进度条呢？对比一下_trackLayer和_progressLayer。_progressLayer我们多设置了一个strokeEnd属性。下面我们要针对这个属性处理动画。

1
2
3
4
5
6
7
8
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];  // 展现动画的方式。使动画看起来更加逼真。
animation.duration = 2;  //动画时间
animation.fromValue = 0;  //动画起始值
animation.toValue = @1;  //动画目标值
animation.fillMode = kCAFillModeForwards;  //设置动画结束后依然显示结束后的状态
animation.removedOnCompletion = NO;  
[_progressLayer addAnimation:animation forKey:nil];

那么截止到这里一个完整的圆形进度条就做完了。

拓展一：实现一个彩色的进度条

彩色进度条.gif
将_progressLayer从当前view移除

1
[_progressLayer addAnimation:animation forKey:nil];

并在动画代码之前加上这段代码，就可以实现彩色的进度条。

1
2
3
4
5
CAGradientLayer *colorLayer = [CAGradientLayer layer];
colorLayer.frame = _progressLayer.frame;
[colorLayer setColors:@[(id)[UIColor blueColor].CGColor,(id)[UIColor yellowColor].CGColor,(id)[UIColor greenColor].CGColor]];
colorLayer.mask = _progressLayer;
[_trackLayer addSublayer:colorLayer];

拓展二：实现一个锦上添花的效果。

更为炫酷.gif
要实现上面图片的动画，则需要使用动画组。下面直接上代码。

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
26
27
28
29
30
CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation1.duration = 2;
animation1.fromValue = 0;
animation1.toValue = @1;
animation1.fillMode = kCAFillModeForwards;
animation1.removedOnCompletion = NO;
CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
animation2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation2.duration = 2;
animation2.fromValue = 0;
animation2.toValue = @0.25;
animation2.fillMode = kCAFillModeForwards;
animation2.removedOnCompletion = NO;
CABasicAnimation *animation3 = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
animation3.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation3.beginTime = 1.5;
animation3.duration = 1;
animation3.fromValue = @0.25;
animation3.toValue = @1;
animation3.fillMode = kCAFillModeForwards;
animation3.removedOnCompletion = NO;
CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = @[animation1,animation2,animation3];
group.duration = 2.5;
group.repeatCount = MAXFLOAT;
[_progressLayer addAnimation:group forKey:nil];

这里面有个大坑就是动画效果一定要选择kCAMediaTimingFunctionEaseInEaseOut，划重点，必考。

总结

其实动画很简单，就是分解每一步动作。实现需要耐心和恒心。以上资料，我研究了三天。是难也好，笨也罢。坚持住吧。

源码：https://github.com/lpy834994897/AnimationSimple