core animation

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

Core Animation for iPhone

1


What’s that?

Transforming smoothly an object’s visual representation over time

Import QuartzCore.framework in your project

2

http://www.invasivecode.com



CALayer

• Every view is layer-backed

• A cached copy of UIView’s appearance

• Takes responsibility during animation

3




CALayer

4




Layer geometry

5




Layer transformations

You can use matrix transformationsIt is a CGFloat 4x4 matrix

trasform and sublayerTransformFunction 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.

CATranform3DMakeRotationReturns a transform that rotates by 'angle' radians about the vector '(x, y, z)'. If the vector has

length zero the identity transform is returned.

CATranform3DRotateRotate 't' by 'angle' radians about the vector '(x, y, z)' and return the result. t' = rotation(angle, x,

y, z) * t.

6




Animation types

• Implicit animation• Explicit animation• Key-frame animation

7




Implicit animations

• The simplest type of animation

• Tell UIView that it should animate and change its properties

[UIView beginAnimations:nil context:nil];

// your code here

[UIVIew commitAnimations];

The animation starts when commitAnimations is sent

8




Implicit animationsDefined 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

9




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:

10




Objects

CAAnimation

CAPropertyAnimation

CATransition

CAKeyframeAnimationCABasicAnimation

CAAnimationGroup

<CAMediaTiming>

11




CAMediaTimingFunction

12




View Transitions

13


What is it?

• Special kind of animation

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

14




Animation type

Animation type DescriptionkCATransitionFade 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

aTransition.type = kCATransitionMoveIn;

15


Animation subtype

Animation subtype DescriptionkCATransitionFromTop New views slides from top

kCATransitionFromBottom New views slides from bottom

kCATransitionFromRight New views slides from right

kCATransitionFromLeft New views slides from left

aTransition.subtype = kCATransitionFromLeft;

16


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

17


Animate a view

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

18

core animation

Technology