很多人都說(shuō)我動(dòng)畫(huà)做的賊6，但是不知道CALayer的原理，也不知道CALyer常用的幾個(gè)子類(lèi)，也并不知道貝塞爾曲線(xiàn)到底是怎么拐彎的，但是......我動(dòng)畫(huà)做的真的特別牛逼。

UIBezierPath

注：當(dāng)貝塞爾曲線(xiàn)于CAShapeLayer混合使用時(shí)，共同作用的屬性只遵循CAShapeLayer的設(shè)置！?。?/p>

有時(shí)候，看到一些陌生的東西會(huì)有莫名的抵觸感，不知道怎么入手，其實(shí)最簡(jiǎn)單的，學(xué)習(xí)一個(gè)東西，我們就要先看系統(tǒng)提供的API，首先，創(chuàng)建貝塞爾曲線(xiàn)的幾個(gè)方法和屬性：

+ (instancetype)bezierPath;   //初始化貝塞爾曲線(xiàn)(無(wú)形狀)
+ (instancetype)bezierPathWithRect:(CGRect)rect;  //繪制矩形貝塞爾曲線(xiàn)
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;  //繪制橢圓（圓形）曲線(xiàn)
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius; // 繪制含有圓角的貝塞爾曲線(xiàn)
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;  //繪制可選擇圓角方位的貝塞爾曲線(xiàn)
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;   //繪制圓弧曲線(xiàn)
+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath; //根據(jù)CGPathRef繪制貝塞爾曲線(xiàn)

- (void)moveToPoint:(CGPoint)point;  //貝塞爾曲線(xiàn)開(kāi)始的點(diǎn)
- (void)addLineToPoint:(CGPoint)point;  //添加直線(xiàn)到該點(diǎn)
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;  //添加二次曲線(xiàn)到該點(diǎn)
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint; //添加曲線(xiàn)到該點(diǎn)
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise NS_AVAILABLE_IOS(4_0);  //添加圓弧 注:上一個(gè)點(diǎn)會(huì)以直線(xiàn)的形式連接到圓弧的起點(diǎn)
- (void)closePath;  //閉合曲線(xiàn)

- (void)removeAllPoints; //去掉所有曲線(xiàn)點(diǎn)

@property(nonatomic) CGFloat lineWidth;  //邊框?qū)挾?@property(nonatomic) CGLineCap lineCapStyle;  //端點(diǎn)類(lèi)型
@property(nonatomic) CGLineJoin lineJoinStyle;  //線(xiàn)條連接類(lèi)型
@property(nonatomic) CGFloat miterLimit;  //線(xiàn)條最大寬度最大限制
- (void)setLineDash:(nullable const CGFloat *)pattern count:(NSInteger)count phase:(CGFloat)phase;  //虛線(xiàn)類(lèi)型
- (void)fill;  //填充貝塞爾曲線(xiàn)內(nèi)部
- (void)stroke; //繪制貝塞爾曲線(xiàn)邊框

我們創(chuàng)建一個(gè)自定義的View，在drawRect:中進(jìn)行各種貝塞爾曲線(xiàn)繪制：

- (void)drawRect:(CGRect)rect {
    //矩形貝塞爾曲線(xiàn)
    UIBezierPath* bezierPath_rect = [UIBezierPath bezierPathWithRect:CGRectMake(30, 50, 100, 100)];
    [bezierPath_rect moveToPoint:CGPointMake(60, 60)];
    [bezierPath_rect addLineToPoint:CGPointMake(80, 80)];
    [bezierPath_rect addLineToPoint:CGPointMake(60, 90)];
    //[bezierPath_rect closePath];
    //[bezierPath_rect removeAllPoints];
    bezierPath_rect.lineCapStyle = kCGLineCapButt;  //端點(diǎn)類(lèi)型
    bezierPath_rect.lineJoinStyle = kCGLineJoinMiter;  //線(xiàn)條連接類(lèi)型
    bezierPath_rect.miterLimit = 1;
    CGFloat dash[] = {20,1};
    [bezierPath_rect setLineDash:dash count:2 phase:0];
    bezierPath_rect.lineWidth = 10;
    //圓形 橢圓貝塞爾曲線(xiàn)
    UIBezierPath *bezierPath_oval = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(200, 50, 150, 100)];
    bezierPath_oval.lineWidth = 10;
    //還有圓角的貝塞爾曲線(xiàn)
    UIBezierPath *bezierPath_RoundedRect = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(30, 200, 100, 100) cornerRadius:20];
    bezierPath_RoundedRect.lineWidth = 10;
    //繪制可選擇圓角方位的貝塞爾曲線(xiàn)
    UIBezierPath *bezierPath_RoundedCornerRect = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(200, 200, 100, 100) byRoundingCorners:UIRectCornerTopLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(20, 20)];
    bezierPath_RoundedCornerRect.lineWidth = 10;
    //繪制圓弧曲線(xiàn)
    UIBezierPath *bezierPath_ArcCenter = [UIBezierPath bezierPathWithArcCenter:CGPointMake(0, 400) radius:50 startAngle:M_PI / 2 * 3 endAngle:M_PI / 3 clockwise:YES];
    bezierPath_ArcCenter.lineWidth = 10;
    //添加二次 三次貝塞爾曲線(xiàn)
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    bezierPath.lineWidth = 2;
    [bezierPath moveToPoint:CGPointMake(10, 520)];
    [bezierPath addLineToPoint:CGPointMake(50, 530)];
    [bezierPath addQuadCurveToPoint:CGPointMake(100, 510) controlPoint:CGPointMake(80, 650)];
    [bezierPath addCurveToPoint:CGPointMake(200, 530) controlPoint1:CGPointMake(130, 600) controlPoint2:CGPointMake(170, 400)];
    [bezierPath addArcWithCenter:CGPointMake(300, 400) radius:50 startAngle:0 endAngle:M_PI * 2 clockwise:YES];
    
    [bezierPath moveToPoint:CGPointMake(20, 520)];
    [bezierPath addLineToPoint:CGPointMake(40, 520)];
    //根據(jù)CGPathRef繪制貝塞爾曲線(xiàn)
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, NULL, 10, 640);
    CGPathAddCurveToPoint(path, NULL, 100, 700, 250, 550, 350, 650);
    UIBezierPath *bezierPath_CGPath = [UIBezierPath bezierPathWithCGPath:path];
    bezierPath_CGPath.lineWidth = 4;
    //選擇填充顏色
    [[UIColor redColor] set];
    [bezierPath_rect fill];
    [bezierPath_oval fill];
    [bezierPath_RoundedRect fill];
    [bezierPath_RoundedCornerRect fill];
    //[bezierPath_ArcCenter fill];
    //[bezierPath_CGPath fill];

    //選擇線(xiàn)條顏色
    [[UIColor blackColor] set];
    [bezierPath_rect stroke];
    [bezierPath_oval stroke];
    [bezierPath_RoundedRect stroke];
    [bezierPath_RoundedCornerRect stroke];
    [bezierPath_ArcCenter stroke];
    [bezierPath stroke];
    [bezierPath_CGPath stroke];
    //
    CALayer* aniLayer = [CALayer layer];
    aniLayer.backgroundColor = [UIColor redColor].CGColor;
    aniLayer.position = CGPointMake(10, 520);
    aniLayer.bounds = CGRectMake(0, 0, 8, 8);
    aniLayer.cornerRadius = 4;
    [self.layer addSublayer:aniLayer];
    //
    CAKeyframeAnimation* keyFrameAni = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    keyFrameAni.repeatCount = NSIntegerMax;
    keyFrameAni.path = bezierPath.CGPath;
    keyFrameAni.duration = 15;
    keyFrameAni.beginTime = CACurrentMediaTime() + 1;
    [aniLayer addAnimation:keyFrameAni forKey:@"keyFrameAnimation"];
}

運(yùn)行結(jié)果：