Animation Programming with Core Animaiton

iOS Animation

---

In most cases, animations can be accomplished using higher-level UIKit methods, however, Core Animation will give you a better understanding of what is going on. It also allows for a more explicit way of describing animations.

Additive property in CABasicAnimation

Enable continuously & smoothly animation using additive property in CABasicAnimation. additive When true the value specified by the animation will be "added" to the current presentation value of the property to produce the new presentation value.

Example:

Approach 1: (more realistic)

If there is an animation moving an object from (20, 100) to (100, 100) with 2s duration, then we need to move back the object animately while the previous animation is executing. In this case, we can see the object rush to (100, 100) and then back to (20, 100) animately.

CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath           = @"position.y";
animation.fromValue         = @(88-330);
animation.toValue           = @0;
animation.duration          = 2;
animation.additive          = YES;
// better easing function
animation.timingFunction    = [CAMediaTimingFunction functionWithControlPoints:.5 :0 :.5 :1]; 
self.object.layer.position  = CGPointMake(self.object.center.x, 330);
[self.object.layer addAnimation:animation forKey:@"Ani-1"];
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 
                            (int64_t)(0.8 * NSEC_PER_SEC)),                                  
                             dispatch_get_main_queue(), ^
{
    CABasicAnimation *animation = [CABasicAnimation animation];
    animation.keyPath           = @"position.y";
    animation.fromValue         = @(330-88); 
    animation.toValue           = @0;
    animation.duration          = 2; 
    animation.additive          = YES;
    animation.timingFunction    = [CAMediaTimingFunction functionWithControlPoints:.5 :0
                                                                                  :.5 :1];
    self.object.layer.position  = CGPointMake(self.object.center.x, 88);
    [self.object.layer addAnimation:animation forKey:@"Ani-2"];
});

With the above code, we can create an smoothly animation easily, note that the key for animation should be different, and without timingFunction the animation may stay still about 0.5s while two animation is transitioning.

http://netcetera.org/camtf-playground.html (CAMediaTimingFunction playground)

Approach 2:

CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath   = @"position.y";
animation.fromValue = @(88);
animation.toValue   = @330; 
animation.duration  = 2;
self.object.layer.position = CGPointMake(self.object.center.x, 330);
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
[self.object.layer addAnimation:animation forKey:@"basic"];
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 
                            (int64_t)(0.8 * NSEC_PER_SEC)), 
                             dispatch_get_main_queue(), ^
{
    CABasicAnimation *animation = [CABasicAnimation animation];
    animation.keyPath   = @"position.y";
    animation.fromValue = @([self.object.layer.presentationLayer position].y);
    animation.toValue   = @88;
    animation.duration  = 2;
    animation.timingFunction   = [CAMediaTimingFunction functionWithControlPoints:.5 :0 :.5 :1];
    self.object.layer.position = CGPointMake(self.object.center.x, 88);
    [self.object.layer addAnimation:animation forKey:@"basic1"];
});

• Model layer: If we modify property of an layer, the model layer will be modified immediately.
• Presentation layer: The rending layer in the screen.

e.g. set an layer's position from (0, 100) to (100, 100) animately, model layer->(100, 100). presentation layer->(0~100, 100).

Make sure to check the complete list of supported key paths

When we run this code, we realise that our rocket jumps back to its initial position as soon as the animation is complete. To deal with this issue, wen can update the property directly on the model layer. This is the recommended approach, since it makes the animation completely optional.

Once the animation completes and is removed from the layer, the presentation layer will fall through to the value that is set on the model, which matches the last step of the animation:

CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath = @"position.x"; animation.fromValue = @77;
animation.toValue = @455;          animation.duration  = 1;
[rocket.layer addAnimation:animation forKey:@"basic"];
rocket.layer.position = CGPointMake(455, 61);

A Multi-Stage Animation

Keyframes allow us to define an arbitrary number of points during the animation, and then let Core Animation fill in the so-called in-betweens.

CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
animation.keyPath  = @"position.x";
animation.values   = @[ @0, @10, @-10, @10, @0 ];
animation.keyTimes = @[ @0, @(1 / 6.0), @(3 / 6.0), @(5 / 6.0), @1 ];
animation.duration = 0.4;   
animation.additive = YES;
[form.layer addAnimation:animation forKey:@"shake"];

Animation Along a Path

Thankfully, CAKeyframeAnimation offers the more convenient path property as an alternative. For instance, this is how we would animate a view in a circle:

CGRect boundingRect = CGRectMake(-150, -150, 300, 300);
CAKeyframeAnimation *orbit = [CAKeyframeAnimation animation];
orbit.keyPath  = @"position";
orbit.path     = CFAutorelease(CGPathCreateWithEllipseInRect(boundingRect, NULL));
orbit.duration = 4;
orbit.additive = YES;
orbit.repeatCount     = HUGE_VALF;
orbit.calculationMode = kCAAnimationPaced;
orbit.rotationMode    = kCAAnimationRotateAuto;
[satellite.layer addAnimation:orbit forKey:@"orbit"];

Animating the Drawings

One of the nice little additions in iOS SDK 4.2 are two new properties for CAShapeLayer: strokeStart and strokeEnd. Both are floats that hold a value between 0.0 and 1.0, indicating the relative location along the shape layer's path at which to start and stop stroking the path.

CGRect pathRect     = CGRectInset(self.animationLayer.bounds, 100.0f, 100.0f);
CGPoint roofTip     = CGPointMake(CGRectGetMidX(pathRect), CGRectGetMaxY(pathRect));
CGPoint bottomLeft  = CGPointMake(CGRectGetMinX(pathRect), CGRectGetMinY(pathRect));
CGPoint bottomRight = CGPointMake(CGRectGetMaxX(pathRect), CGRectGetMinY(pathRect));
CGPoint topLeft  = CGPointMake(CGRectGetMinX(pathRect), 
                               CGRectGetMinY(pathRect) + CGRectGetHeight(pathRect) * 2.0f/3.0f);
CGPoint topRight = CGPointMake(CGRectGetMaxX(pathRect), 
                               CGRectGetMinY(pathRect) + CGRectGetHeight(pathRect) * 2.0f/3.0f);
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:bottomLeft];
[path addLineToPoint:topLeft];
[path addLineToPoint:roofTip];
[path addLineToPoint:topRight];
[path addLineToPoint:topLeft];
[path addLineToPoint:bottomRight];
[path addLineToPoint:topRight];
[path addLineToPoint:bottomLeft];
[path addLineToPoint:bottomRight];
CAShapeLayer *pathLayer   = [CAShapeLayer layer];
pathLayer.frame           = self.animationLayer.bounds;
pathLayer.bounds          = pathRect;
pathLayer.geometryFlipped = YES;
pathLayer.path            = path.CGPath;
pathLayer.strokeColor     = [[UIColor blackColor] CGColor];
pathLayer.fillColor       = nil;
pathLayer.lineWidth       = 10.0f;
pathLayer.lineJoin        = kCALineJoinBevel;
[self.animationLayer addSublayer:pathLayer];
self.pathLayer       = pathLayer;
UIImage *penImage    = [UIImage imageNamed:@"pen.png"];
CALayer *penLayer    = [CALayer layer];
penLayer.contents    = (id)penImage.CGImage;
penLayer.anchorPoint = CGPointZero;
penLayer.frame       = CGRectMake(0.0f, 0.0f, penImage.size.width, penImage.size.height);
[pathLayer addSublayer:penLayer];
self.penLayer = penLayer;    

The really nice thing about these properties is that they are animatable. By animating strokeEnd from 0.0 to 1.0 over a duration of a few seconds, we can easily display the path as it is being drawn:

CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration  = 10.0;
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnimation.toValue   = [NSNumber numberWithFloat:1.0f];
[self.pathLayer addAnimation:pathAnimation forKey:@"strokeEndAnimation"];

Finally, add a second layer containing the image of a pen and use a CAKeyframeAnimation to animate it along the path with the same speed to make the illusion perfect:

CAKeyframeAnimation *penAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
penAnimation.duration        = 10.0;
penAnimation.path            = self.pathLayer.path;
penAnimation.calculationMode = kCAAnimationPaced;
[self.penLayer addAnimation:penAnimation forKey:@"penAnimation"];

Timing Functions

You'll notice that there is something very artificial about the animation of our rocket. That is because most movements we see in the real world take time to accelerate or decelerate. Objects that instantly reach their top speed and then stop immediately tend to look very unnatural. Unless you're dancing the robot, that’s rarely a desired effect.

animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];

Animation Groups

For certain complex effects, it may be necessary to animate multiple properties at once. You can see that we have to animate the position, rotation and z-position of the artworks at once. Using CAAnimationGroup, the code to animate one of the covers could look a little something like this:

CABasicAnimation *zPosition = [CABasicAnimation animation];
zPosition.keyPath           = @"zPosition";
zPosition.fromValue         = @-1;
zPosition.toValue           = @1;
zPosition.duration          = 1.2;
CAKeyframeAnimation *rotation = [CAKeyframeAnimation animation];
rotation.keyPath              = @"transform.rotation";
rotation.values               = @[ @0, @0.14, @0 ];
rotation.duration             = 1.2;
rotation.timingFunctions = @[
    [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
    [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]
];
CAKeyframeAnimation *position = [CAKeyframeAnimation animation];
position.keyPath              = @"position";
position.values               = @[
    [NSValue valueWithCGPoint:CGPointZero],
    [NSValue valueWithCGPoint:CGPointMake(110, -20)],
    [NSValue valueWithCGPoint:CGPointZero]
];
position.timingFunctions = @[
    [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
    [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]
];
position.additive = YES;
position.duration = 1.2;
CAAnimationGroup *group = [[CAAnimationGroup alloc] init];
group.animations        = @[ zPosition, rotation, position ];
group.duration          = 1.2;
group.beginTime         = 0.5;
[card.layer addAnimation:group forKey:@"shuffle"];
card.layer.zPosition = 1;

Animating Custom Layer Properties

By default, almost every standard property of CALayer and its subclasses can be animated, either by adding a CAAnimation to the layer (explicit animation), or by specifying an action for the property and then modifying it (implicit animation).

But sometimes we may wish to animate several properties in concert as if they were a single animation, or we may need to perform an animation that cannot be implemented by applying animations to standard layer properties.

We don't actually need to write any animation code at all if the properties we are setting already have standard animation actions set up, because if we modify those properties, they will inherit whatever animation settings are configured in the current CATransaction, and will animate automatically.

// oval
self.bounds      = CGRectMake(0, 0, 200, 200);
self.path        = [UIBezierPath bezierPathWithOvalInRect:self.bounds].CGPath;
self.fillColor   = [UIColor whiteColor].CGColor;
self.strokeColor = [UIColor blackColor].CGColor;
self.lineWidth   = 4;
// rectangle or line
self.hourHand           = [CAShapeLayer layer];
self.hourHand.path      = [UIBezierPath bezierPathWithRect:CGRectMake(-2, -70, 4, 70)].CGPath;
self.hourHand.fillColor = [UIColor blackColor].CGColor;
self.hourHand.position  = CGPointMake(self.bounds.size.width / 2, self.bounds.size.height / 2);
[self addSublayer:self.hourHand];
// we uses NSCalendar to break the time down into hours and minutes, 
// which we then convert into angular coordinates.
NSCalendar *calendar = [[NSCalendar alloc] initWithCalendarIdentifier:NSGregorianCalendar];
NSDateComponents *components    = [calendar components:NSHourCalendarUnit | NSMinuteCalendarUnit 
                                              fromDate:time];
self.hourHand.affineTransform   = CGAffineTransformMakeRotation(components.hour/12.0*2.0*M_PI);
self.minuteHand.affineTransform = CGAffineTransformMakeRotation(components.minute/60.0*2.0*M_PI);

Custom Container View Controller Transitions

If you need to brush up on view controller containment, introduced in iOS 5, make sure to read Ricky Gregersen's "View Controller Containment" in the very first issue.

The components of the iOS 7 custom view controller transition API are mostly protocols which make them extremely flexible to work with, because you can very easily plug them into your existing class hierarchy.

Transition Coordinators providing methods to run other animations in parallel with the transition animations. In this article, we will concentrate on non-interactive transitions. Enough talk, let's get our hands dirty…

You can download the sample code associated with this post from my GitHub page linked here.