Core Animation prepared for March 2011 Minnesota CocoaHeads meeting. Sample code available at: https://github.com/tapharmonic/Core-Animation-Demos

1. Creating Animated UIs with
Core Animation
http://bobmccune.com

2. Agenda
• Overview of Core Animation
• Layers
• Animations
• Transformations
• Practical Animations
• UIKit Animations
• New features in iOS 4

3. Why is animation important?

4. Why is animation important?
• Provides Context
• Aides in Learning
• Natural Interface
• Consistency

5. Core Animation
The “Magic” in iOS
• Lightweight, high-performance compositing
• Hardware accelerated
• Animations run on separate threads
• Simple, familiar programming model
• Powerful, yet easy to use

6. Core Animation Architecture
Rendered
UIKit in GPU
Core Animation
Open GL
Hardware

7. Understanding Layers

8. Core Animation Layers
• Foundational component of Core Animation
• Found in Quartz Core
• Programming model similar to views
• addSublayer
• layoutSublayers
• insertSublayer:atIndex:
• 2 1/2 D Model
• Transform 2D plane in 3D space
• Works with Core Graphics types

9. CALayer Content
• Set contents property
• CGImageRef
• Draw content in CGContextRef
• Delegation: drawLayer:inContext:
• Subclass: drawInContext:
• Specialized Layers:
• CAShapeLayer, CATextLayer,
AVPlayerLayer, CAGradientLayer, etc.

10. CALayer Example
UIImage *image = [UIImage imageNamed:@"ca_logo.png"];
CALayer *logoLayer = [CALayer layer];
logoLayer.bounds =
CGRectMake(0, 0, image.size.width, image.size.height);
logoLayer.borderColor = [UIColor whiteColor].CGColor;
logoLayer.border = 1.0;
logoLayer.position = CGPointMake(160, 180);
logoLayer.contents = (id)image.CGImage;

11. Layer Geometry
X
• bounds
• position
• transform Y
• anchorPoint
anchorPoint
• frame
bounds
position

12. Creating Animations

13. Implicit Animations
• Almost all CALayer properties are animatable
• Property changes trigger implicit animations
• Animation duration over 1/4 second
• Uses linear animation curve by default
• Multiple changes batched into transaction
megaManLayer.position = CGPointMake(200, 100);

14. Explicit Animations
• Core Animation provides support for explicit
animations
• Provides more fine-grained control
• Primary classes
• CABasicAnimation
• CAKeyframeAnimation
• CAAnimationGroup

15. Basic Animations
CABasicAnimation
• Create an animation for a keyPath:
• @"position"
• @"transform.rotation.z"
• @"backgroundColor"
• Set its toValue and fromValue properties
• Add the animation to the layer to animate

16. CABasicAnimation
Example
CABasicAnimation *animation =
[CABasicAnimation animationWithKeyPath:@"opacity"];
animation.fromValue = [NSNumber numberWithFloat:1.0];
animation.toValue = [NSNumber numberWithFloat:0.0];
animation.duration = 1.0;
[layer addAnimation:animation forKey:@"animateOpacity"];

17. CABasicAnimation
Example
CABasicAnimation *animation = Gotcha Alert
[CABasicAnimation animationWithKeyPath:@"opacity"];
animation.fromValue = [NSNumber numberWithFloat:1.0];
animation.toValue = [NSNumber numberWithFloat:0.0];
animation.duration = 1.0;
layer.opacity = 0.0; Update the model to make it stick
[layer addAnimation:animation forKey:@"animateOpacity"];

18. Key Frame Animations
CAKeyframeAnimation
• Provides more advanced animation behavior
• Animate across collection of "key frames"
• path (CGPathRef)
• values (NSArray of values)
• Can define timing of each point or value

19. CAKeyframeAnimation
Example
CAKeyframeAnimation *animation =
[CAKeyframeAnimation animationWithKeyPath:@"position"];
animation.path = path; // CGPathRef
animation.duration = 2.0f;
animation.rotationMode = kCAAnimationRotateAuto;
[layer addAnimation:animation forKey:@"animatePosition"];

20. Transforming Layers
CATransform3D
• Layer transformations with CATransform3D
• Similar to CGAffineTransform
• Transforms can be performed in X,Y, and Z
• Transformations created using:
• CATransform3DScale()
• CATransform3DRotate()
• CATransform3DTranslate()
• Can set transform and sublayerTransform

21. CATransform3D
Example
CABasicAnimation *animation =
[CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
// Animate 2, counter-clockwise 360 degree rotations
CGFloat radians = (2 * M_PI) * -2
animation.toValue = [NSNumber numberWithFloat:radians];
animation.duration = 0.75f;
[layer addAnimation:animation forKey:@"animateRotation"];

22. Animation Demos

23. UIKit Animations

24. UIView Animations
• UIView is a lightweight wrapper over CALayer
• Every view has an associated CALayer
• Override layerClass class method to change
instance
• UIKit provides support for common animations
• Behavior for free with animated:YES
• Low cost view transitions
• Uses Core Animation under the hood

25. Core Animation and UIKit
• View and Layers are complimentary
• CA layers provide no event handling
• Manual hit testing
• No gesture recognizers
• Layers provides more animatable properties
• Layers provide additional capabilities
• cornerRadius, border, shadows
• Need Core Animation to move beyond
stock animations

26. Animating Views in iOS < 4.0
[UIView beginAnimations:@"fadeMe" context:NULL];
[UIView setAnimationDuration:1.0];
self.megaManView.alpha = 0.0f;
[UIView commitAnimations];

27. View Animations in iOS 4
[UIView animateWithDuration:1.0 animations:^{
self.megaManView.alpha = 0.0f;
}];

28. Blocks-based Animation API
animateWithDuration:
animations:
Simple Animations
animateWithDuration:
animations: Simple Animations with
completion: completion callback
animateWithDuration:
delay: More complex with
options:
animations: customizable options
completion:

29. Blocks-based Animation API
animateWithDuration:
animations:
Simple Animations
animateWithDuration:
animations: Simple Animations with
completion: completion callback
animateWithDuration:
delay: More complex with
options:
animations: customizable options
completion:

30. Animation Options
UIViewAnimationOption
• Bit mask to specify animation behavior
• Repeating and autoreverse behavior
• Enabling user interaction
• Blocks-based API defaults to NO
• Specifying animation curves
• Beginning an animation from current state
• Property inheritance

31. View Transitions
• UIView provides common animated transitions
• Reveals, Slides, Flips, Curls, etc.
• Transitions performed using:
• transitionWithView:
• transitionFromView:toView:
• Transitions behavior customized with
animation options mask

32. Animation Demos

33. Summary
• CA provides powerful, easy to use API
• Lightweight
• Hardware accelerated
• Robust animations without OpenGL
• UIView and Core Animation
• UIKit provides support for common
animations
• Can use Core Animation directly where more
power and flexibility is needed