經常使用支付寶結賬，發現支付成功后，都會有個畫圈打勾的動畫效果，所以想著：咱也試著寫一個唄～

實現方案：

1. 繪制一個圓圈路徑；
2. 繪制一個對勾的路徑；
3. 添加動畫效果實現。

sasa2.gif

使用到的技術點

• CAShapeLayer;
• UIBezierPath;
• CABasicAnimation;

具體實現

1.路徑繪制，使用貝塞爾曲線來畫一個圓圈（注意啟示弧度和終點弧度的設置），對勾可以用兩條直線來拼接，這也可以用貝塞爾曲線來畫；

    //圓圈路徑
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(60, 200) radius:50 startAngle:M_PI * 3 / 2 endAngle:M_PI * 7 / 2 clockwise:YES];
    path.lineCapStyle = kCGLineCapRound; //線條拐角
    path.lineJoinStyle = kCGLineCapRound; //終點處理
    
    //對勾路徑
    UIBezierPath *linePath = [UIBezierPath bezierPath];
    [linePath moveToPoint:CGPointMake(30, 200)];
    [linePath addLineToPoint:CGPointMake(60, 220)];
    [linePath addLineToPoint:CGPointMake(90, 190)];

    //拼接兩個路徑
    [path appendPath:linePath];

2.由于CAShapeLayer的path屬性只能賦值一個路徑，那我又兩個路徑怎么辦呢？
答案是可以使用下面方法將兩個路徑拼接起來：

// Appending paths
- (void)appendPath:(UIBezierPath *)bezierPath;

3.初始化CAShapeLayer，定義線條顏色，寬度；

    shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = path.CGPath;
    shapeLayer.strokeColor = [UIColor greenColor].CGColor;//線條顏色
    shapeLayer.fillColor = [UIColor clearColor].CGColor;//填充顏色
    shapeLayer.lineWidth = 5.0;
    shapeLayer.strokeStart = 0.0;
    shapeLayer.strokeEnd = 0.0;
    [self.view.layer addSublayer:shapeLayer];

strokeStart，strokeEnd官方文檔的解釋如下：

/* These values define the subregion of the path used to draw the
 * stroked outline. The values must be in the range [0,1] with zero
 * representing the start of the path and one the end. Values in
 * between zero and one are interpolated linearly along the path
 * length. strokeStart defaults to zero and strokeEnd to one. Both are
 * animatable. */

大致意思是：用這兩個屬性來定義要繪制的路徑的區域范圍，取值范圍為0到1，代表著路徑的開始和結束，兩個屬性默認都是0，可以用來做一些動畫效果。
說的通俗點（翻譯成人話），這兩個值其實就是定義要繪制路徑的區域的某一段，比如strokeStart＝0，strokeEnd=0.25，就代表著繪制路徑的前1/4段；同理，strokeStart＝0.75，strokeEnd=1.0，就是繪制路徑的后1/4段；

4.給CAShapeLayer添加CABasicAnimation動畫，動畫根據strokeEnd的值的變化來進行，動畫結束后，由于需要保持動畫的最后狀態（也就是strokeEnd＝1的狀態），所以需要設置：

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    if (shapeLayer.strokeEnd == 1.0)
    {
        [animation setFromValue:@1.0];
        [animation setToValue:@0.0];
    }
    else
    {
        [animation setFromValue:@0.0];
        [animation setToValue:@1.0];
    }
    
    [animation setDuration:3];
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;//當動畫結束后,layer會一直保持著動畫最后的狀態
    animation.delegate = self;
    [shapeLayer addAnimation:animation forKey:@"Circle"];

5.這樣完整的動畫就出現來了，逆向動畫的實現方法也很簡單，在動畫結束后
重新設置strokeEnd = 1.0，再進行動畫事件就可以了。
（具體動畫效果見Demo）

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    if (flag)
    {
        if (shareLayerOne.strokeEnd == 0.25)
        {
            shareLayerOne.strokeEnd = 1.0;
        }
        else
        {
            shareLayerOne.strokeEnd = 0.25;
        }
    }
}

CAShapeLayer + UIBezierPath 可以實現很多其它有意思的動畫效果，后面繼續研究...

Demo下載鏈接：AnimationDemo

@Kangqj