Successfully reported this slideshow.
Upcoming SlideShare
×

# Core Animation

3,489 views

Published on

Uso de Core Animation en aplicaciones desarrolladas para iPhone e iPod touch

Published in: Technology
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

### Core Animation

1. 1. Core Animation for iPhone www.invasivecode.com 1 CocoaHeads, Barcelona, April 24, 2009
2. 2. What’s that? Transforming smoothly an object’s visual representation over time Import QuartzCore.framework in your project www.invasivecode.com 2 CocoaHeads, Barcelona, April 24, 2009
3. 3. CALayer • Every view is layer-backed • A cached copy of UIView’s appearance • Takes responsibility during animation www.invasivecode.com 3 CocoaHeads, Barcelona, April 24, 2009
4. 4. CALayer www.invasivecode.com 4 CocoaHeads, Barcelona, April 24, 2009
5. 5. Layer geometry www.invasivecode.com 5 CocoaHeads, Barcelona, April 24, 2009
6. 6. 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. www.invasivecode.com 6 CocoaHeads, Barcelona, April 24, 2009
7. 7. Animation types • Implicit animation • Explicit animation • Key-frame animation www.invasivecode.com 7 CocoaHeads, Barcelona, April 24, 2009
8. 8. 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]; www.invasivecode.com 8 CocoaHeads, Barcelona, April 24, 2009
9. 9. 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 www.invasivecode.com 9 CocoaHeads, Barcelona, April 24, 2009
10. 10. 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: www.invasivecode.com 10 CocoaHeads, Barcelona, April 24, 2009
11. 11. Objects CAAnimation <CAMediaTiming> CAAnimationGroup CATransition CAPropertyAnimation CABasicAnimation CAKeyframeAnimation www.invasivecode.com 11 CocoaHeads, Barcelona, April 24, 2009
12. 12. CAMediaTimingFunction www.invasivecode.com 12 CocoaHeads, Barcelona, April 24, 2009
13. 13. View Transitions www.invasivecode.com 13 CocoaHeads, Barcelona, April 24, 2009
14. 14. What is it? • Special kind of animation #import <QuartzCore/CAAnimation.h> CATransition *aTransition = [CATransition animation]; www.invasivecode.com 14 CocoaHeads, Barcelona, April 24, 2009
15. 15. 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 www.invasivecode.com 15 CocoaHeads, Barcelona, April 24, 2009
16. 16. 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 www.invasivecode.com 16 CocoaHeads, Barcelona, April 24, 2009
17. 17. 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 www.invasivecode.com 17 CocoaHeads, Barcelona, April 24, 2009
18. 18. Animate a view [self.view.superview.layer addAnimation:myTransition forKey:nil]; www.invasivecode.com 18 CocoaHeads, Barcelona, April 24, 2009