CAShapeLayer
简单介绍: CAShapeLayer继承自CALayer,因此,可使用CALayer的所有属性。 但是,CAShapeLayer需要和贝塞尔曲线配合使用才有意义。 CAShapeLayer和drawRect的比较 - 1.drawRect:属于CoreGraphics框架,占用CPU,性能消耗大 - 2.CAShapeLayer:属于CoreAnimation框架,通过GPU来渲染图形,节省性能。动画渲染直接提交给手机GPU,不消耗内存
温馨提示:drawRect只是一个方法而已,是UIView的方法,重写此方法可以完成我们的绘制图形功能。
CAShapeLayer与UIBezierPath的关系
CAShapeLayer与UIBezierPath的关系:
1.CAShapeLayer中shape代表形状的意思,所以需要形状才能生效 2.贝塞尔曲线可以创建基于矢量的路径,而UIBezierPath类是对CGPathRef的封装 3.贝塞尔曲线给CAShapeLayer提供路径,CAShapeLayer在提供的路径中进行渲染。路径会闭环,所以绘制出了Shape 4.用于CAShapeLayer的贝塞尔曲线作为path,其path是一个首尾相接的闭环的曲线,即使该贝塞尔曲线不是一个闭环的曲线
CAShapeLayer和UIBezierPath结合代码
#import "ViewController.h"
#import "DrawLineView.h"
@interface ViewController (){
CAShapeLayer *_shapeLayer;
NSTimer *_timer;
}
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.view.backgroundColor = [UIColor whiteColor];
//创建CAShapeLayer
_shapeLayer = [CAShapeLayer layer];
_shapeLayer.frame = CGRectMake(0, 0, 300, 400);
_shapeLayer.position = self.view.center;
_shapeLayer.fillColor = [UIColor clearColor].CGColor;
_shapeLayer.strokeColor = [UIColor redColor].CGColor;
_shapeLayer.lineWidth = 2;
_shapeLayer.path = [self getStar1BezierPath].CGPath;
[self.view.layer addSublayer:_shapeLayer];
_timer = [NSTimer scheduledTimerWithTimeInterval:1.f target:self selector:@selector(pathAnimation) userInfo:nil repeats:YES];
}
//动画
- (void)pathAnimation {
static int i = 0;
if (i++ %2 == 0) {
CABasicAnimation *circleAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
circleAnimation.removedOnCompletion = NO;
circleAnimation.duration = 1;
circleAnimation.fromValue = (__bridge id _Nullable)([self getStar1BezierPath].CGPath);
circleAnimation.toValue = (__bridge id _Nullable)([self getStar2BezierPath].CGPath);
_shapeLayer.path = [self getStar2BezierPath].CGPath;
[_shapeLayer addAnimation:circleAnimation forKey:@"animationCirclePath"];
} else {
CABasicAnimation *circleAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
circleAnimation.removedOnCompletion = NO;
circleAnimation.duration = 1;
circleAnimation.fromValue = (__bridge id _Nullable)([self getStar2BezierPath].CGPath);
circleAnimation.toValue = (__bridge id _Nullable)([self getStar1BezierPath].CGPath);
_shapeLayer.path = [self getStar1BezierPath].CGPath;
[_shapeLayer addAnimation:circleAnimation forKey:@"animationCirclePath"];
}
}
//贝塞尔曲线1
- (UIBezierPath *)getStar1BezierPath {
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.26)];
[starPath addLineToPoint:CGPointMake(3.48, 16.32)];
[starPath addLineToPoint:CGPointMake(16.68, 14.49)];
[starPath closePath];
return starPath;
}
//贝塞尔曲线2
- (UIBezierPath *)getStar2BezierPath {
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;
}