Question

In an iPad application, I want to move a layer anti-clockwise along an arc which has a center point of (768, 512) and radius of 512. I want it to start at 12 o’clock (which is top right corner of the screen) and finish at 6 o’clock (bottom right corner).

After a lot of try-and-fail, I got the code working

CGPoint origin = logo.layer.position;

CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.calculationMode = kCAAnimationPaced;
pathAnimation.fillMode = kCAFillModeForwards;
pathAnimation.removedOnCompletion = YES;

CGMutablePathRef curvedPath = CGPathCreateMutable();
CGPathMoveToPoint(curvedPath, NULL, origin.x, origin.y);
CGPathAddArc(curvedPath, NULL, 768, 512, 512, -M_PI_2, M_PI_2, YES);
pathAnimation.path = curvedPath;
CGPathRelease(curvedPath);
pathAnimation.duration = 2;
[logo.layer addAnimation:pathAnimation forKey:@"curve"];

But the problem is I can’t understand the starting angle and end angle parameter. Why should I use -M_PI_2 and M_PI_2 respectively and set the clockwise to YES?

I think I am moving the object from 90 degree to 270 degree anti-clockwise, thus the code should be
CGPathAddArc(curvedPath, NULL, 768, 512, 512, -M_PI_2, M_PI_2, YES);

I am probably wrong in multiple places and by chance got the correct result.

Please correct me and help me understand the two angle parameters:

startAngle

The angle (in radians) from the horizontal that determines the starting point of the arc.

endAngle

The angle (in radians) from the horizontal that determines the ending point of the arc.

Thanks

Leo

Answer 1

The location of 0 is on the X axis, like this:

    3*PI/2
      |
PI ---|--- 0
      |
     PI/2

-PI/2 is equivalent to 3PI/2.

You’re effectively starting your rotation at the same place (-PI/2, 3*PI/2, 5*PI/2, etc., are all equal)

“12 o’clock” as you’re thinking of it is 3*PI/2 or -PI/2… and you’re rotating down to “6 o’clock” which is PI/2