CAShapeLayer，CABasicAnimation

CAShapeLayer的lineCap有3种样式:kCALineCapButt,kCALineCapRound,kCALineCapSquare;

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(30, 40)];
    [path addLineToPoint:CGPointMake(230, 40)];
    [path addLineToPoint:CGPointMake(230, 140)];
    CAShapeLayer *testLayer = [CAShapeLayer layer];
    testLayer.path = path.CGPath;
    testLayer.lineWidth = 15;
    testLayer.fillColor = [UIColor clearColor].CGColor;
    testLayer.strokeColor = [UIColor blueColor].CGColor;
    testLayer.lineCap = kCALineCapSquare;
    testLayer.lineJoin = kCALineJoinBevel;
    [self.view.layer addSublayer:testLayer];

lineCap

kCALineCapButt``kCALineCapSquare线段的两端为直角,两者效果一样

kCALineCapSquare.png

kCALineCapRound线段的两端为圆角

kCALineCapRound.png

lineJoin

kCALineJoinMiter线段交点为直角

kCALineJoinMiter.png

kCALineJoinRound线段交点为圆角

kCALineJoinRound.png

kCALineJoinBevel线段交点为切角

kCALineJoinBevel.png

CABasicAnimation

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
    animation.fromValue = @0;
    animation.toValue = @1;
    animation.duration = 2;
    animation.fillMode = kCAFillModeForwards;
    animation.removedOnCompletion = NO;
    [testLayer addAnimation:animation forKey:nil];

strokeStart

fromValue->toValue : 0 -> 1
线段从起点到终点慢慢消失
fromValue->toValue : 1 -> 0
线段慢慢从终点画到起点

strokeEnd

fromValue->toValue : 0 -> 1
线段慢慢从起点画到终点
fromValue->toValue : 1 -> 0
线段从终点到终点慢慢消失