Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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



   ...
CALayer


         • Every view is layer-backed
         • A cached copy of UIView’s appearance
         • Takes responsib...
CALayer




www.invasivecode.com      4      CocoaHeads, Barcelona, April 24, 2009
Layer geometry




www.invasivecode.com         5    CocoaHeads, Barcelona, April 24, 2009
Layer transformations
 You can use matrix transformations
 It is a CGFloat 4x4 matrix

 trasform and sublayerTransform
   ...
Animation types


         • Implicit animation
         • Explicit animation
         • Key-frame animation



www.invasi...
Implicit animations

    • The simplest type of animation
    • Tell UIView that it should animate and change its
      pr...
Implicit animations
      Defined in UIView          + beginAnimations:context:
                                + commitAni...
Explicit animations
     • Basic Animations: CABasicAnimation
     • You can specify the animation for each layer property...
Objects
                                  CAAnimation             <CAMediaTiming>




    CAAnimationGroup

              ...
CAMediaTimingFunction




www.invasivecode.com   12   CocoaHeads, Barcelona, April 24, 2009
View Transitions



www.invasivecode.com   13   CocoaHeads, Barcelona, April 24, 2009
What is it?

      • Special kind of animation


        #import <QuartzCore/CAAnimation.h>
        CATransition *aTransit...
Animation type

                aTransition.type = kCATransitionMoveIn;



         Animation type                        ...
Animation subtype

           aTransition.subtype = kCATransitionFromLeft;


                Animation subtype            ...
Timing and duration

   aTransition.timingFunction = UIViewAnimationCurveEaseIn;

                       Timing           ...
Animate a view


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




www.invasivecode.com            ...
Upcoming SlideShare
Loading in …5
×

Core Animation

3,489 views

Published on

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

Published in: Technology
  • 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 Defined 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

×