CGPath Animation

Question

I need some sample code where I can animate a curve/arc path which should draw a full circle as animated?

Any input will be appreciated.

Thanks, Sat

What do you mean "draw a full circle as animated?" How do you want to animate drawing your circle? Do you want to start out drawing a tiny wedge, like a small fraction of a pie chart, and have the wedge get bigger and bigger until it is the size of the full circle? — Duncan C, May 21 '12 at 02:35

score 10 · Answer 1 · edited May 23 '17 at 12:06

UPDATE: Realizing there is a better solution to this problem. Just create a circular path and animate the strokeEnd property of a CAShapeLayer from 0.0f to 1.0f. Take a look at this answer from Ole: Drawing a path with CAKeyFrameAnimation on iPhone

ORIGINAL ANSWER:

You can use a CAKeyframeAnimation and create a Core Graphics path. This code animates a layer in a parabolic pattern, but you can adapt it to draw a circle.

- (CAAnimation*)pathAnimation;
{

    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path,NULL,50.0,120.0);

    CGPathAddCurveToPoint(path,NULL,50.0,275.0,
                          150.0,275.0,
                          150.0,120.0);
    CGPathAddCurveToPoint(path,NULL,150.0,275.0,
                          250.0,275.0,
                          250.0,120.0);    
    CGPathAddCurveToPoint(path,NULL,250.0,275.0,
                          350.0,275.0,
                          350.0,120.0);    
    CGPathAddCurveToPoint(path,NULL,350.0,275.0,
                          450.0,275.0,
                          450.0,120.0);

    CAKeyframeAnimation *
        animation = [CAKeyframeAnimation 
                     animationWithKeyPath:@"position"];

    [animation setPath:path];
    [animation setDuration:3.0];

    [animation setAutoreverses:YES];

    CFRelease(path);

    return animation;

}

CGPath Animation

1 Answers1

Linked