iOS CoreAnimation教程 第二篇

今天主要講解圖層的strokeStart strokeEnd 屬性。

strokeStart strokeEnd兩個屬性的預設值都是0-1 ，值的大小大概意思是描述了有多少路徑畫完。想象下你小時候寫英文時候一筆下來的過程，下面會用動畫描述生成的過程。

一般這兩個屬性會結合CAShaperLayer使用，看兩個效果。

具體程式碼實現

    UIBezierPath *rectanglePath = [UIBezierPath bezierPath];
    
  //這個是第二個效果
    [rectanglePath moveToPoint:CGPointMake(0, 177)];
    [rectanglePath addLineToPoint:CGPointMake(185, 177)];
    [rectanglePath addLineToPoint:CGPointMake(185, 0)];
    [rectanglePath addLineToPoint:CGPointMake(0, 0)];
    [rectanglePath addLineToPoint:CGPointMake(0, 177)];
    [rectanglePath closePath];

    //這個是第一個效果
//    [rectanglePath moveToPoint:CGPointMake(185, 177)];
//    [rectanglePath addLineToPoint:CGPointMake(185, 0)];
//    [rectanglePath addLineToPoint:CGPointMake(0, 0)];
//    [rectanglePath addLineToPoint:CGPointMake(0, 177)];
//    [rectanglePath addLineToPoint:CGPointMake(185, 177)];
//    [rectanglePath closePath];

    CAShapeLayer * rectangle = [CAShapeLayer layer];
    rectangle.frame       = CGRectMake(83, 206, 185, 177);
    rectangle.fillColor   = [UIColor colorWithRed:0.937 green: 0.431 blue:0.268 alpha:1].CGColor;
    rectangle.strokeColor = [UIColor colorWithRed:0.129 green: 0.151 blue:0.404 alpha:1].CGColor;
    rectangle.lineWidth   = 8;
    rectangle.strokeStart = 0.4;
    rectangle.strokeEnd   = 1;
    rectangle.path        = rectanglePath.CGPath;
    [self.view.layer addSublayer:rectangle];

程式碼大概解釋如下：

1. 用貝塞爾曲線生成一個路徑，注意這個路徑座標Y軸是向下的。
2. 用CAShaperLayer建立一個圖層依據剛才的路徑，並設定座標，填充色，邊框色，邊框的粗細。
3. 最後新增到layer上。

但是為什麼效果不一樣呢？這個就是注意地方：

strokeStart strokeEnd這兩個屬性預設strokeStart 是0，strokeEnd是1。這個屬性的效果和貝塞爾曲線生成開始的點的位置有關， 方向是逆時針方向。也就是你自己用鉛筆畫一個矩形的正筆畫和倒筆畫，同樣都是生成矩形，但是效果卻不一樣。

具體做一個動畫來解釋

    UIBezierPath *rectanglePath = [UIBezierPath bezierPath];
    
    //    [rectanglePath moveToPoint:CGPointMake(0, 177)];
    //    [rectanglePath addLineToPoint:CGPointMake(185, 177)];
    //    [rectanglePath addLineToPoint:CGPointMake(185, 0)];
    //    [rectanglePath addLineToPoint:CGPointMake(0, 0)];
    //    [rectanglePath addLineToPoint:CGPointMake(0, 177)];
    //    [rectanglePath closePath];
    
    [rectanglePath moveToPoint:CGPointMake(185, 177)];
    [rectanglePath addLineToPoint:CGPointMake(185, 0)];
    [rectanglePath addLineToPoint:CGPointMake(0, 0)];
    [rectanglePath addLineToPoint:CGPointMake(0, 177)];
    [rectanglePath addLineToPoint:CGPointMake(185, 177)];
    [rectanglePath closePath];
    
    CAShapeLayer * rectangle = [CAShapeLayer layer];
    rectangle.frame       = CGRectMake(83, 206, 185, 177);
    rectangle.fillColor   = [UIColor colorWithRed:0.937 green: 0.431 blue:0.268 alpha:1].CGColor;
    rectangle.strokeColor = [UIColor colorWithRed:0.129 green: 0.151 blue:0.404 alpha:1].CGColor;
    rectangle.lineWidth   = 8;
    rectangle.strokeStart = 0;
    rectangle.strokeEnd   = 1;
    rectangle.path        = rectanglePath.CGPath;
    [self.view.layer addSublayer:rectangle];
    
    //做動畫
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    
    animation.fromValue = [NSNumber numberWithFloat:0];
    animation.toValue = [NSNumber numberWithFloat:1];
    animation.duration = 1.5;
    
    animation.fillMode = kCAFillModeForwards;
    animation.removedOnCompletion = false;
    
    [rectangle addAnimation:animation forKey:@"drawLineAnimation"];

在圖層上加了一個動畫描述了路徑的生成過程，下面看效果圖對比貝塞爾曲線點位置不同影響的結果。