Thursday, May 19, 2011

Keyframe Animation iOS - CAKeyframeAnimation - Objective-C

If you have missed the Simple Frame by Frame Animation in iOS part 1 and part 2, just go ahead and give the code a try to get a feel of frame based animation in iOS. So far, I have yet to cover how to animate an object from point A to point B. You might have also missed the part where I demonstrated the use of CABasicAnimation here. It was rather a simple way to animate position properties from a coordinate to another.

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.
Visual CAKeyframeAnimation: CGPathAddQuadCurveToPoint
CAKeyframeAnimation: CGPathAddQuadCurveToPoint

CGPathAddQuadCurveToPoint(path, NULL, cx, cy, x, y);

CGPathAddQuadCurveToPoint :

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.

Visual CAKeyframeAnimation: CGPathAddCurveToPoint
CAKeyframeAnimation: CGPathAddCurveToPoint

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.

Visual CAKeyframeAnimation: CGPathAddArcToPoint
CAKeyframeAnimation: CGPathAddArcToPoint

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.

Visual CAKeyframeAnimation: CGPathAddArc
CAKeyframeAnimation: CGPathAddArc

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.

1 comment: