1.CAShapeLayer簡(jiǎn)介
-
CAShapeLayer是一個(gè)通過(guò)矢量圖形而不是bitmap來(lái)繪制的圖層子類(lèi)附迷。 -
CAShapeLayer繼承自CALayer，可以使用CALayer的所有屬性值哎媚。 -
CAShapeLayer需要與 貝塞爾曲線 配合使用才有意義（這是個(gè)人經(jīng)驗(yàn)）喇伯。 - 使用
CAShapeLayer與貝塞爾曲線可以畫(huà)出你想要的圖形。 - 相對(duì)于
Core Graphics繪制圖片拨与，使用CAShapeLayer有以下一些優(yōu)點(diǎn):
- 渲染快速稻据。
CAShapeLayer使用了硬件加速(使用CPU渲染)，繪制同一圖形會(huì)比用Core Graphics快很多 - 高效使用內(nèi)存买喧。一個(gè)
CAShapeLayer不需要像普通CALayer一樣創(chuàng)建一個(gè)寄宿圖形捻悯，所以無(wú)論有多大，都不會(huì)占用太多的內(nèi)存淤毛。 - 不會(huì)被圖層邊界剪裁掉今缚。一個(gè)
CAShapeLayer可以在邊界之外繪制。
2.貝塞爾曲線簡(jiǎn)介
在數(shù)學(xué)的數(shù)值分析領(lǐng)域中低淡，貝濟(jì)埃曲線（英語(yǔ)：Bézier curve姓言，亦作“貝塞爾”）是計(jì)算機(jī)圖形學(xué)中相當(dāng)重要的參數(shù)曲線。(貝塞爾曲線掃盲)
貝塞爾曲線對(duì)應(yīng)iOS中是UIBezierPath對(duì)象蔗蹋，它是CGPathRef數(shù)據(jù)類(lèi)型的封裝何荚。path如果是基于矢量形狀的，都用直線和曲線段去創(chuàng)建猪杭。我們使用直線段去創(chuàng)建矩形和多邊形餐塘，使用曲線段去創(chuàng)建弧（arc）皂吮，圓或者其他復(fù)雜的曲線形狀戒傻。
3.簡(jiǎn)單的使用
使用CAShapeLayer和UIBezierPath畫(huà)一條直線和一個(gè)橢圓形，效果如下：
使用貝塞爾曲線畫(huà)直線和橢圓形
代碼如下：
// 1,繪制一條直線
UIBezierPath * path = [[UIBezierPath alloc] init];
path.lineWidth = 1.f;
//設(shè)置起點(diǎn)
[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,繪制一個(gè)橢圓形
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];
到這里你肯定會(huì)問(wèn)涮较，學(xué)了這兩個(gè)就是為了畫(huà)條線和畫(huà)個(gè)橢圓稠鼻？？狂票？肯定不是啦，不然我怎么會(huì)特（gu）意（yi）寫(xiě)出來(lái)呢熙暴？先看看效果：
五角星動(dòng)畫(huà)
- (void)createUI2 {
// 創(chuàng)建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];
// 創(chuàng)建定時(shí)器
_timer = [NSTimer scheduledTimerWithTimeInterval:2.0f target:self selector:@selector(bezierPathAnimation) userInfo:nil repeats:YES];
}
/// 執(zhí)行bezierPath的動(dòng)畫(huà)
- (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闺属、圓圈旋轉(zhuǎn)動(dòng)畫(huà)
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"];
轉(zhuǎn)圈動(dòng)畫(huà)
參考文章: iOS之UI--CAShapeLayer
