CAShapeLayer 学习和实践

介绍

CAShapeLayer是一个通过矢量图形而不是bitmap来绘制的图层子类。你指定诸如颜色和线宽等属性，用CGPath来定义想要绘制的图形，最后CAShapeLayer就自动渲染出来了。当然，你也可以用Core Graphics直接向原始的CALyer的内容中绘制一个路径，相比直下，使用CAShapeLayer有以下一些优点：
* 渲染快速。CAShapeLayer使用了硬件加速，绘制同一图形会比用Core Graphics快很多。
* 高效使用内存。一个CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形，所以无论有多大，都不会占用太多的内存。
* 不会被图层边界剪裁掉。一个CAShapeLayer可以在边界之外绘制。你的图层路径不会像在使用Core Graphics的普通CALayer一样被剪裁掉（如我们在第二章所见）。
* 不会出现像素化。当你给CAShapeLayer做3D变换时，它不像一个有寄宿图的普通图层一样变得像素化。

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

实践

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

思路

1. 创建一个CAShapeLayer作为底部的圆环，暂且命名为：_trackLayer
2. 创建一个CAShapeLayer作为进度条，暂且命名为：_progressLayer
3. 创建一个动画来控制_progressLayer变化

@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属性。下面我们要针对这个属性处理动画。

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];

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

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

将_progressLayer从当前view移除

[_progressLayer addAnimation:animation forKey:nil];

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

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];

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

要实现上面图片的动画，则需要使用动画组。下面直接上代码。

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