Tuesday, July 24, 2012

How to animate a line draw ?

If you want to draw a line pixel by pixel.
You will have to use combination of UIBezierPath, CAShapeLayer, CABasicAnimation. You can download the code here. The piece of code given below  animates a simple line drawn pixel by pixel from point (50.0,0.0to point (120.0600.0).

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(50.0,0.0)];
    [path addLineToPoint:CGPointMake(120.0, 600.0)];

    CAShapeLayer *pathLayer = [CAShapeLayer layer];
    pathLayer.frame = self.view.bounds;
    pathLayer.path = path.CGPath;
    pathLayer.strokeColor = [[UIColor redColor] CGColor];
    pathLayer.fillColor = nil;
    pathLayer.lineWidth = 2.0f;
    pathLayer.lineJoin = kCALineJoinBevel;

    [self.view.layer addSublayer:pathLayer];

    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 2.0;
    pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
    [pathLayer addAnimation:pathAnimation forKey:@"strokeEnd"];

1 comment: