Core Animation

Core Animation
for iPhone

www.invasivecode.com 1 CocoaHeads, Barcelona, April 24, 2009

What’s that?

Transforming smoothly an object’s visual
representation over time

Import QuartzCore.framework in your project


CALayer

• Every view is layer-backed
• A cached copy of UIView’s appearance
• Takes responsibility during animation


CALayer


Layer geometry


Layer transformations
You can use matrix transformations
It is a CGFloat 4x4 matrix

trasform and sublayerTransform
Function Use
CATranform3DMakeTranslation Returns a transform that translates by '(tx, ty, tz)'. t' = [1 0 0 0; 0 1 0 0; 0 0 1 0; tx ty tz 1].
CATranform3DTranslate Translate 't' by '(tx, ty, tz)' and return the result: * t' = translate(tx, ty, tz) * t.
CATranform3DMakeScale Returns a transform that scales by `(sx, sy, sz)': * t' = [sx 0 0 0; 0 sy 0 0; 0 0 sz 0; 0 0 0 1].
CATranform3DScale Scale 't' by '(sx, sy, sz)' and return the result: * t' = scale(sx, sy, sz) * t.
Returns a transform that rotates by 'angle' radians about the vector '(x, y, z)'. If the vector has
CATranform3DMakeRotation
length zero the identity transform is returned.
Rotate 't' by 'angle' radians about the vector '(x, y, z)' and return the result. t' = rotation(angle, x,
CATranform3DRotate
y, z) * t.


Animation types

• Implicit animation
• Explicit animation
• Key-frame animation


Implicit animations

• The simplest type of animation
• Tell UIView that it should animate and change its
properties

The animation starts when commitAnimations is sent
[UIView beginAnimations:nil context:nil];

// your code here

[UIVIew commitAnimations];


Implicit animations
Deﬁned in UIView + beginAnimations:context:
+ commitAnimations
+ setAnimationStartDate:
+ setAnimationsEnabled:
+ setAnimationDelegate:
+ setAnimationWillStartSelector:
+ setAnimationDidStopSelector:
+ setAnimationDuration:
+ setAnimationDelay:
+ setAnimationCurve:
+ setAnimationRepeatCount:
+ setAnimationRepeatAutoreverses:
+ setAnimationBeginsFromCurrentState:
+ setAnimationTransition:forView:cache:
+ areAnimationsEnabled

All the properties change concurrently


Explicit animations
• Basic Animations: CABasicAnimation
• You can specify the animation for each layer property
• Create an animation with
+animationWithKeyPath:
• Apply the animation sending
addAnimation:forKey
• Stop the animation sending:
removeAnimationForKey:


Objects
CAAnimation <CAMediaTiming>

CAAnimationGroup

CATransition

CAPropertyAnimation

CABasicAnimation CAKeyframeAnimation


CAMediaTimingFunction


View Transitions


What is it?

• Special kind of animation

#import <QuartzCore/CAAnimation.h>
CATransition *aTransition = [CATransition animation];


Animation type

aTransition.type = kCATransitionMoveIn;

Animation type Description
kCATransitionFade Fade from one view to the next

kCATransitionPush Push the old view out, bringing the new one in

kCATransitionReveal Move the old view out revealing the new one

kCATransitionMoveIn Move the new view in over the old one


Animation subtype

aTransition.subtype = kCATransitionFromLeft;

Animation subtype Description
kCATransitionFromTop New views slides from top
kCATransitionFromBottom New views slides from bottom

kCATransitionFromRight New views slides from right

kCATransitionFromLeft New views slides from left


Timing and duration

aTransition.timingFunction = UIViewAnimationCurveEaseIn;

Timing Description
UIViewAnimationCurveEaseInOut Animation is slow at the beginning and the end
UIViewAnimationCurveEaseIn Animation speed increase at the beginning
UIViewAnimationCurveEaseOut Animation speed decrease at the end
UIViewAnimationCurveLinear Uniform speed

aTransition.duration = 0.5; // seconds


Animate a view

[self.view.superview.layer addAnimation:myTransition forKey:nil];


Core Animation

More Related Content

Similar to Core Animation (20)

Recently uploaded (20)

Core Animation