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 beCGPathAddArc(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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With