CAShapeLayer
簡(jiǎn)單介紹: CAShapeLayer繼承自CALayer馍乙,因此户矢,可使用CALayer的所有屬性获茬。 但是侣灶,CAShapeLayer需要和貝塞爾曲線配合使用才有意義识脆。 CAShapeLayer和drawRect的比較 - 1.drawRect:屬于CoreGraphics框架设联,占用CPU,性能消耗大 - 2.CAShapeLayer:屬于CoreAnimation框架灼捂,通過(guò)GPU來(lái)渲染圖形离例,節(jié)省性能。動(dòng)畫渲染直接提交給手機(jī)GPU悉稠,不消耗內(nèi)存
溫馨提示:drawRect只是一個(gè)方法而已宫蛆,是UIView的方法,重寫此方法可以完成我們的繪制圖形功能的猛。
CAShapeLayer與UIBezierPath的關(guān)系
CAShapeLayer與UIBezierPath的關(guān)系:
1.CAShapeLayer中shape代表形狀的意思洒扎,所以需要形狀才能生效 2.貝塞爾曲線可以創(chuàng)建基于矢量的路徑,而UIBezierPath類是對(duì)CGPathRef的封裝 3.貝塞爾曲線給CAShapeLayer提供路徑衰絮,CAShapeLayer在提供的路徑中進(jìn)行渲染袍冷。路徑會(huì)閉環(huán),所以繪制出了Shape 4.用于CAShapeLayer的貝塞爾曲線作為path猫牡,其path是一個(gè)首尾相接的閉環(huán)的曲線胡诗,即使該貝塞爾曲線不是一個(gè)閉環(huán)的曲線
CAShapeLayer和UIBezierPath結(jié)合代碼
#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];
//創(chuàng)建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];
}
//動(dòng)畫
- (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;
}