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:@""];