iOS學習：CAShapeLayer與UIBezierPath動畫

CAShapeLayer與UIBezierPath動畫：

CAShapeLayer與UIBezierPath的動畫，就離不開 CABasicAnimation；也將會使用到 strokeEnd、strokeStart、lineWidth 三個屬性:

先作一條貝塞爾曲線：

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(40, 80)];
    [path addCurveToPoint:CGPointMake(280, 80)
            controlPoint1:CGPointMake(120, 40)
            controlPoint2:CGPointMake(200, 120)];
    
    _animLayer = [CAShapeLayer layer];
    _animLayer.path = path.CGPath;
    _animLayer.lineWidth = 2.f;
    _animLayer.strokeColor = [UIColor blackColor].CGColor;
    _animLayer.fillColor = [UIColor clearColor].CGColor;
    
    [self.view.layer addSublayer:_animLayer];

• strokeEnd：

    self.animLayer.strokeStart = 0.f;   // 設置起點爲 0
    self.animLayer.strokeEnd = 0.f;     // 設置終點爲 0
    
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.duration = 3.f;   // 持續時間
    animation.fromValue = @(0); // 從 0 開始
    animation.toValue = @(1);   // 到 1 結束
    // 保持動畫結束時的狀態
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    // 動畫緩慢的進入，中間加速，而後減速的到達目的地。
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.animLayer addAnimation:animation forKey:@""];

　　注意：當曲線給了填充色後，填充色是不參與動畫的。

    self.animLayer.fillColor = [UIColor grayColor].CGColor;

　　

• strokeStart & strokeEnd：

    self.animLayer.strokeStart = 0.5;
    self.animLayer.strokeEnd = 0.5;
    CABasicAnimation *animationStart = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
    animationStart.fromValue = @(0.5);
    animationStart.toValue = @(0);
    
    CABasicAnimation *animationEnd = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animationEnd.fromValue = @(0.5);
    animationEnd.toValue = @(1.f);
　　
    CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];
    groupAnimation.duration = 2.f;
    groupAnimation.animations = @[animationStart, animationEnd];
    groupAnimation.removedOnCompletion = NO;
    groupAnimation.fillMode = kCAFillModeForwards;
    [self.animLayer addAnimation:groupAnimation forKey:@""];

• lineWidth：

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"lineWidth"];
    animation.fromValue = @(2);
    animation.toValue = @(6);
    animation.duration = 2.f;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    [self.animLayer addAnimation:animation forKey:@""];

• 圓形指示器：

- (void)viewDidLoad {
    [super viewDidLoad]; 
   
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(40, 40, 100, 100)];
    _circleLayer = [CAShapeLayer layer];
    _circleLayer.path = path.CGPath;
    _circleLayer.lineWidth = 2.f;
    _circleLayer.strokeColor = [UIColor redColor].CGColor;
    _circleLayer.fillColor = [UIColor clearColor].CGColor;
    [self.view.layer addSublayer:_circleLayer];
}

- (void)circleAnimation {
    self.circleLayer.strokeStart = 0.f;
    self.circleLayer.strokeEnd = 0.f;
    
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.duration = 3.f;   // 持續時間
    animation.fromValue = @(0); // 從 0 開始
    animation.toValue = @(1);   // 到 1 結束
    // 保持動畫結束時的狀態
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    // 動畫緩慢的進入，中間加速，而後減速的到達目的地。
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.circleLayer addAnimation:animation forKey:@""];
}