Your SlideShare is downloading. ×
  • Like
Core Animation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Core Animation

  • 2,965 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,965
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
55
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Core Animation for iPhone www.invasivecode.com 1 CocoaHeads, Barcelona, April 24, 2009
  • 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. 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. CALayer www.invasivecode.com 4 CocoaHeads, Barcelona, April 24, 2009
  • 5. Layer geometry www.invasivecode.com 5 CocoaHeads, Barcelona, April 24, 2009
  • 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. Animation types • Implicit animation • Explicit animation • Key-frame animation www.invasivecode.com 7 CocoaHeads, Barcelona, April 24, 2009
  • 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. 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. 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. Objects CAAnimation <CAMediaTiming> CAAnimationGroup CATransition CAPropertyAnimation CABasicAnimation CAKeyframeAnimation www.invasivecode.com 11 CocoaHeads, Barcelona, April 24, 2009
  • 12. CAMediaTimingFunction www.invasivecode.com 12 CocoaHeads, Barcelona, April 24, 2009
  • 13. View Transitions www.invasivecode.com 13 CocoaHeads, Barcelona, April 24, 2009
  • 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. 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. 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. 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. Animate a view [self.view.superview.layer addAnimation:myTransition forKey:nil]; www.invasivecode.com 18 CocoaHeads, Barcelona, April 24, 2009