CABasicAnimation - 核心动画里与CAShapeLayer相关的几个动画

 

CAShapeLayer有strokeEnd strokeStart lineWidth 三个属性。

 

先添加shapeLayer

 

 

- (CAShapeLayer *)shapeLayer {

    

    if (_shapeLayer == nil) {

        

        CGPoint startPoint = CGPointMake(50, 300);

        CGPoint endPoint = CGPointMake(300, 300);

        CGPoint controlPoint1 = CGPointMake(125, 200);

        CGPoint controlPoint2 = CGPointMake(225, 400);

        

        UIBezierPath *path = [[UIBezierPath alloc] init];

        _shapeLayer = [[CAShapeLayer alloc] init];

        

        [path moveToPoint:startPoint];

        [path addCurveToPoint:endPoint controlPoint1:controlPoint1 controlPoint2:controlPoint2];

        

        _shapeLayer.path = path.CGPath;

        _shapeLayer.fillColor = [UIColor clearColor].CGColor;

        _shapeLayer.strokeColor = [UIColor blackColor].CGColor;

        [self.view.layer addSublayer:_shapeLayer];

    }

    

    return _shapeLayer;

}

strokeEnd 这个属性的值范围是0-1，动画显示了从0到1之间每一个值对这条曲线的影响。

 

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];

    animation.fromValue = @0;

    animation.toValue = @1;

    animation.duration = 2;

 

    [self.shapeLayer addAnimation:animation forKey:@""];

 

 

strokeStart 如果把这两个值首先都设置成0.5然后慢慢改变成0和1的时候就会变成第二个动画。

 

 

    self.shapeLayer.strokeStart = 0.5;

    self.shapeLayer.strokeEnd = 0.5;

 

    CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"strokeStart"];

    animation1.fromValue = @0.5;

    animation1.toValue = @0;

    animation1.duration = 2;

 

    CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];

    animation2.fromValue = @0.5;

    animation2.toValue = @1;

    animation2.duration = 2;

 

    [self.shapeLayer addAnimation:animation1 forKey:@""];

    [self.shapeLayer addAnimation:animation2 forKey:@""];

 

lineWidth 曲线会慢慢变粗

 

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"lineWidth"];

    animation.fromValue = @1;

    animation.toValue = @10;

    animation.duration = 2;

    [self.shapeLayer addAnimation:animation forKey:@""];