http://bobmccune.com

Core AnimationCreating Animated UIs with

Agenda

• Overview of Core Animation• Layers

• Animations

• Transformations

• Practical Animations• UIKit Animations

• New features in iOS 4

Why is animation important?

Why is animation important?• Provides Context

• Aides in Learning

• Natural Interface

• Consistency

Core Animation

• Lightweight, high-performance compositing• Hardware accelerated

• Animations run on separate threads

• Simple, familiar programming model

• Powerful, yet easy to use

The “Magic” in iOS

Core Animation Architecture

UIKit

Core Animation

Open GL

Hardware

Renderedin GPU

Understanding Layers

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

CALayer Content

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

CALayer ExampleUIImage *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;

Layer Geometry

• bounds• position• transform• anchorPoint• frame

anchorPoint

bounds

X

Y

position

Creating Animations

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);

Explicit Animations

• Core Animation provides support for explicit animations• Provides more fine-grained control

• Primary classes• CABasicAnimation• CAKeyframeAnimation• CAAnimationGroup

Basic Animations

• 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

CABasicAnimation

CABasicAnimationExample

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"];

CABasicAnimationExample

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

Gotcha Alert

Update the model to make it stick

Key Frame Animations

• 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

CAKeyframeAnimation

CAKeyframeAnimation

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

Example

Transforming Layers

• 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

CATransform3D

CATransform3D

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];

// Animate 2, counter-clockwise 360 degree rotationsCGFloat radians = (2 * M_PI) * -2animation.toValue = [NSNumber numberWithFloat:radians];animation.duration = 0.75f;

[layer addAnimation:animation forKey:@"animateRotation"];

Example

Animation Demos

UIKit Animations

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

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

Animating Views in iOS < 4.0

[UIView beginAnimations:@"fadeMe" context:NULL];[UIView setAnimationDuration:1.0];self.megaManView.alpha = 0.0f;[UIView commitAnimations];

View Animations in iOS 4

[UIView animateWithDuration:1.0 animations:^{ self.megaManView.alpha = 0.0f;}];

Blocks-based Animation API

animateWithDuration: animations:

animateWithDuration: animations: completion:

animateWithDuration: delay: options: animations: completion:

Simple Animations

Simple Animations withcompletion callback

More complex with customizable options

Blocks-based Animation API

animateWithDuration: animations:

animateWithDuration: animations: completion:

animateWithDuration: delay: animations: completion:

Simple Animations

Simple Animations withcompletion callback

More complex with customizable options

options:

Animation Options

• 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

UIViewAnimationOption

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

Animation Demos

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