Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CGPath Animation

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


1 Answers

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;

}
like image 143
Matt Long Avatar answered Jan 06 '26 23:01

Matt Long



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!