Those of us who learnt Adobe Flash animation will love CAKeyframeAnimation to bits. Simply because it's simple and rather easy to implement. This is how:
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, x1, y1);
CGPathAddQuadCurveToPoint(path, NULL, x1, y1, x2, y2);
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.path = path;
pathAnimation.duration = 1.0;
[someLayer addAnimation:pathAnimation forKey:nil];
See, it's just that simple. In fact, most Core Animation implementations are the same. But as soon as you start developing more complex game and application. You realize you need more complicated type of animation that curves around or moves in slight arc using bezier points that are all so familiar with illustrator. But as soon as you start looking into the Apple developer documentation, more questions rise than you would like to admit.
It would be nice if they included some visual assistance as to what those cx cy means in the methods. So, I made my own visual assistance that will go a long way to help me to animate using all these CGPathAddQuadCurveToPoint, CGPathAddCurveToPoint, CGPathAddArcToPoint, CGPathAddArc and others. Here I have illustrated how the curve and arc will draw out in the animation. Hope it helps.
CGPathAddQuadCurveToPoint(path, NULL, cx, cy, x, y);
This curve is made using one bezier point, thus only one set of cx and cy is used.
But if you need more control over the shape of the curve, then the next one will work well for you.
CGPathAddCurveToPoint(path, NULL, cx1, cy1, cx2, cy2, x, y);
There are two sets of bezier points for maximum control over the curvature of the line.
CGPathAddArcToPoint(path, NULL, x1, y1, x2, y2, r);
This method is a bit tricky to use as it doesn't use the conventional bezier points,
but by designated two tangent points and a floating point radius.
CGPathAddArc(path, NULL, x, y, r, R1, R2, YES); //Clockwise
CGPathAddArc(path, NULL, x, y, r, R1, R2, NO); //Anti Clockwise
This method is the weirdest of all, I have yet to find a use for it because it just
spirals left/right depending on the BOOL value in the last argument.
This method takes in two radians in floating point, which is the starting radians
and the ending radians. I think it starts with 0-6.284 for a 360 degree spins.
Experiment with it yourself so that you know what I mean.