1.CAShapeLayer简介
-
CAShapeLayer是一个通过矢量图形而不是bitmap来绘制的图层子类。 -
CAShapeLayer继承自CALayer，可以使用CALayer的所有属性值。 -
CAShapeLayer需要与 贝塞尔曲线 配合使用才有意义（这是个人经验）。 - 使用
CAShapeLayer与贝塞尔曲线可以画出你想要的图形。 - 相对于
Core Graphics绘制图片，使用CAShapeLayer有以下一些优点:
- 渲染快速。
CAShapeLayer使用了硬件加速(使用CPU渲染)，绘制同一图形会比用Core Graphics快很多 - 高效使用内存。一个
CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形，所以无论有多大，都不会占用太多的内存。 - 不会被图层边界剪裁掉。一个
CAShapeLayer可以在边界之外绘制。
2.贝塞尔曲线简介
在数学的数值分析领域中，贝济埃曲线（英语：Bézier curve，亦作“贝塞尔”）是计算机图形学中相当重要的参数曲线。(贝塞尔曲线扫盲)
贝塞尔曲线对应iOS中是UIBezierPath对象，它是CGPathRef数据类型的封装。path如果是基于矢量形状的，都用直线和曲线段去创建。我们使用直线段去创建矩形和多边形，使用曲线段去创建弧（arc），圆或者其他复杂的曲线形状。
3.简单的使用
使用CAShapeLayer和UIBezierPath画一条直线和一个椭圆形，效果如下：
使用贝塞尔曲线画直线和椭圆形
代码如下：
// 1,绘制一条直线
UIBezierPath * path = [[UIBezierPath alloc] init];
path.lineWidth = 1.f;
//设置起点
[path moveToPoint:CGPointMake(0, 10)];
//添加子路径
[path addLineToPoint:CGPointMake(300, 10)];
CAShapeLayer * shapeLayer = [CAShapeLayer layer];
shapeLayer.backgroundColor = [UIColor yellowColor].CGColor;
shapeLayer.frame = CGRectMake(0, 0, 300, 50);
shapeLayer.position = self.view.center;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.strokeColor = [UIColor redColor].CGColor;
shapeLayer.path = path.CGPath;
[self.view.layer addSublayer:shapeLayer];
// 2,绘制一个椭圆形
UIBezierPath * path2 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 10, 100, 50)];
CAShapeLayer * shapeLayer2 = [CAShapeLayer layer];
shapeLayer2.backgroundColor = [UIColor blueColor].CGColor;
shapeLayer2.frame = CGRectMake(0, 0, 300, 150);
shapeLayer2.position = CGPointMake(self.view.center.x, self.view.center.y+70);
shapeLayer2.fillColor = [UIColor clearColor].CGColor;
shapeLayer2.strokeColor = [UIColor redColor].CGColor;
shapeLayer2.path = path2.CGPath;
[self.view.layer addSublayer:shapeLayer2];
到这里你肯定会问，学了这两个就是为了画条线和画个椭圆？？？肯定不是啦，不然我怎么会特（gu）意（yi）写出来呢？先看看效果：
五角星动画
- (void)createUI2 {
// 创建shapeLayer
_shapeLayer = [CAShapeLayer layer];
_shapeLayer.frame = CGRectMake(0, 0, 200, 200);
_shapeLayer.position = self.view.center;
_shapeLayer.path = [self getStarOneBezierPath].CGPath;
_shapeLayer.fillColor = [UIColor clearColor].CGColor;
_shapeLayer.strokeColor = [UIColor redColor].CGColor;
_shapeLayer.lineWidth = 2.0f;
[self.view.layer addSublayer:_shapeLayer];
// 创建定时器
_timer = [NSTimer scheduledTimerWithTimeInterval:2.0f target:self selector:@selector(bezierPathAnimation) userInfo:nil repeats:YES];
}
/// 执行bezierPath的动画
- (void)bezierPathAnimation {
static int i = 0;
if (i++ % 2 == 0) {
CABasicAnimation * circleAnim = [CABasicAnimation animationWithKeyPath:@"path"];
circleAnim.removedOnCompletion = NO;
circleAnim.duration = 2;
circleAnim.fromValue = (__bridge id _Nullable)([self getStarOneBezierPath].CGPath);
circleAnim.toValue = (__bridge id _Nullable)([self getStarTwoBezierPath].CGPath);
_shapeLayer.path = [self getStarTwoBezierPath].CGPath;
[_shapeLayer addAnimation:circleAnim forKey:@"animateCirclePath"];
}else {
CABasicAnimation * circleAnim = [CABasicAnimation animationWithKeyPath:@"path"];
circleAnim.removedOnCompletion = NO;
circleAnim.duration = 2;
circleAnim.fromValue = (__bridge id _Nullable)([self getStarTwoBezierPath].CGPath);
circleAnim.toValue = (__bridge id _Nullable)([self getStarOneBezierPath].CGPath);
_shapeLayer.path = [self getStarOneBezierPath].CGPath;
[_shapeLayer addAnimation:circleAnim forKey:@"animateCirclePath"];
}
}
/// 贝塞尔曲线1
- (UIBezierPath *)getStarOneBezierPath {
// draw star
UIBezierPath * starPath = [UIBezierPath bezierPath];
[starPath moveToPoint:CGPointMake(22.5, 2.5)];
[starPath addLineToPoint:CGPointMake(28.32, 14.49)];
[starPath addLineToPoint:CGPointMake(41.52, 16.32)];
[starPath addLineToPoint:CGPointMake(31.92, 25.56)];
[starPath addLineToPoint:CGPointMake(34.26, 38.68)];
[starPath addLineToPoint:CGPointMake(22.5, 32.4)];
[starPath addLineToPoint:CGPointMake(10.74, 38.68)];
[starPath addLineToPoint:CGPointMake(13.08, 25.56)];
[starPath addLineToPoint:CGPointMake(3.48, 16.32)];
[starPath addLineToPoint:CGPointMake(16.68, 14.49)];
[starPath closePath];
return starPath;
}
/// 贝塞尔曲线2
- (UIBezierPath *)getStarTwoBezierPath {
// draw star
UIBezierPath * starPath = [UIBezierPath bezierPath];
[starPath moveToPoint:CGPointMake(22.5, 2.5)];
[starPath addLineToPoint:CGPointMake(32.15, 9.21)];
[starPath addLineToPoint:CGPointMake(41.52, 16.32)];
[starPath addLineToPoint:CGPointMake(38.12, 27.57)];
[starPath addLineToPoint:CGPointMake(34.26, 38.68)];
[starPath addLineToPoint:CGPointMake(22.5, 38.92)];
[starPath addLineToPoint:CGPointMake(10.74, 38.68)];
[starPath addLineToPoint:CGPointMake(6.88, 27.57)];
[starPath addLineToPoint:CGPointMake(3.48, 16.32)];
[starPath addLineToPoint:CGPointMake(12.85, 9.21)];
[starPath closePath];
return starPath;
}
4、圆圈旋转动画
CALayer * layer = [CALayer layer];
layer.frame = CGRectMake(100, 150, 120, 120);
layer.backgroundColor = [UIColor blueColor].CGColor;
[self.view.layer addSublayer:layer];
UIBezierPath * bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(60, 60) radius:50 startAngle:0 endAngle:M_PI*1.75 clockwise:YES];
CAShapeLayer * shapeLayer = [CAShapeLayer layer];
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.strokeColor = [UIColor whiteColor].CGColor;
shapeLayer.lineWidth = 2;
shapeLayer.strokeStart = 0;
shapeLayer.strokeEnd = 1;
shapeLayer.lineCap = kCALineCapRound;
shapeLayer.path = bezierPath.CGPath;
[layer setMask:shapeLayer];
CABasicAnimation * rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotationAnimation.fromValue = [NSNumber numberWithFloat:0.0];
rotationAnimation.toValue = [NSNumber numberWithFloat:2.0*M_PI];
rotationAnimation.repeatCount = MAXFLOAT;
rotationAnimation.duration = 1;
rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
[layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];
转圈动画
参考文章: iOS之UI--CAShapeLayer
