Core Animation

18,318 views
18,131 views

Published on

Core Animation prepared for March 2011 Minnesota CocoaHeads meeting.

Sample code available at:

https://github.com/tapharmonic/Core-Animation-Demos

Published in: Technology
1 Comment
32 Likes
Statistics
Notes
  • Core Animation is a graphics rendering and animation infrastructure available on both iOS and OS X that you use to animate the views and other visual elements of your app. With Core Animation, most of the work required to draw each frame of an animation is done for you. http://www.sollylabs.com/ (animation studio)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
18,318
On SlideShare
0
From Embeds
0
Number of Embeds
4,772
Actions
Shares
0
Downloads
372
Comments
1
Likes
32
Embeds 0
No embeds

No notes for slide

Core Animation

  1. 1. Creating Animated UIs withCore Animation http://bobmccune.com
  2. 2. Agenda• Overview of Core Animation • Layers • Animations • Transformations• Practical Animations • UIKit Animations • New features in iOS 4
  3. 3. Why is animation important?
  4. 4. Why is animation important?• Provides Context• Aides in Learning• Natural Interface• Consistency
  5. 5. Core AnimationThe “Magic” in iOS • Lightweight, high-performance compositing • Hardware accelerated • Animations run on separate threads • Simple, familiar programming model • Powerful, yet easy to use
  6. 6. Core Animation Architecture Rendered UIKit in GPU Core Animation Open GL Hardware
  7. 7. Understanding Layers
  8. 8. Core Animation Layers• Foundational component of Core Animation • Found in Quartz Core• Programming model similar to views • addSublayer • layoutSublayers • insertSublayer:atIndex:• 2 1/2 D Model • Transform 2D plane in 3D space• Works with Core Graphics types
  9. 9. CALayer Content• Set contents property • CGImageRef• Draw content in CGContextRef • Delegation: drawLayer:inContext: • Subclass: drawInContext:• Specialized Layers: • CAShapeLayer, CATextLayer, AVPlayerLayer, CAGradientLayer, etc.
  10. 10. CALayer ExampleUIImage *image = [UIImage imageNamed:@"ca_logo.png"];CALayer *logoLayer = [CALayer layer];logoLayer.bounds = CGRectMake(0, 0, image.size.width, image.size.height);logoLayer.borderColor = [UIColor whiteColor].CGColor;logoLayer.border = 1.0;logoLayer.position = CGPointMake(160, 180);logoLayer.contents = (id)image.CGImage;
  11. 11. Layer Geometry X• bounds• position• transform Y• anchorPoint anchorPoint• frame bounds position
  12. 12. Creating Animations
  13. 13. Implicit Animations • Almost all CALayer properties are animatable • Property changes trigger implicit animations • Animation duration over 1/4 second • Uses linear animation curve by default • Multiple changes batched into transaction megaManLayer.position = CGPointMake(200, 100);
  14. 14. Explicit Animations • Core Animation provides support for explicit animations • Provides more fine-grained control • Primary classes • CABasicAnimation • CAKeyframeAnimation • CAAnimationGroup
  15. 15. Basic AnimationsCABasicAnimation • Create an animation for a keyPath: • @"position" • @"transform.rotation.z" • @"backgroundColor" • Set its toValue and fromValue properties • Add the animation to the layer to animate
  16. 16. CABasicAnimationExampleCABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"opacity"];animation.fromValue = [NSNumber numberWithFloat:1.0];animation.toValue = [NSNumber numberWithFloat:0.0];animation.duration = 1.0;[layer addAnimation:animation forKey:@"animateOpacity"];
  17. 17. CABasicAnimationExampleCABasicAnimation *animation = Gotcha Alert [CABasicAnimation animationWithKeyPath:@"opacity"];animation.fromValue = [NSNumber numberWithFloat:1.0];animation.toValue = [NSNumber numberWithFloat:0.0];animation.duration = 1.0;layer.opacity = 0.0; Update the model to make it stick[layer addAnimation:animation forKey:@"animateOpacity"];
  18. 18. Key Frame AnimationsCAKeyframeAnimation • Provides more advanced animation behavior • Animate across collection of "key frames" • path (CGPathRef) • values (NSArray of values) • Can define timing of each point or value
  19. 19. CAKeyframeAnimationExampleCAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];animation.path = path; // CGPathRefanimation.duration = 2.0f;animation.rotationMode = kCAAnimationRotateAuto;[layer addAnimation:animation forKey:@"animatePosition"];
  20. 20. Transforming LayersCATransform3D• Layer transformations with CATransform3D • Similar to CGAffineTransform • Transforms can be performed in X,Y, and Z• Transformations created using: • CATransform3DScale() • CATransform3DRotate() • CATransform3DTranslate()• Can set transform and sublayerTransform
  21. 21. CATransform3DExampleCABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];// Animate 2, counter-clockwise 360 degree rotationsCGFloat radians = (2 * M_PI) * -2animation.toValue = [NSNumber numberWithFloat:radians];animation.duration = 0.75f;[layer addAnimation:animation forKey:@"animateRotation"];
  22. 22. Animation Demos
  23. 23. UIKit Animations
  24. 24. UIView Animations• UIView is a lightweight wrapper over CALayer • Every view has an associated CALayer • Override layerClass class method to change instance• UIKit provides support for common animations • Behavior for free with animated:YES • Low cost view transitions• Uses Core Animation under the hood
  25. 25. Core Animation and UIKit• View and Layers are complimentary• CA layers provide no event handling • Manual hit testing • No gesture recognizers• Layers provides more animatable properties• Layers provide additional capabilities • cornerRadius, border, shadows• Need Core Animation to move beyond stock animations
  26. 26. Animating Views in iOS < 4.0[UIView beginAnimations:@"fadeMe" context:NULL];[UIView setAnimationDuration:1.0];self.megaManView.alpha = 0.0f;[UIView commitAnimations];
  27. 27. View Animations in iOS 4[UIView animateWithDuration:1.0 animations:^{ self.megaManView.alpha = 0.0f; }];
  28. 28. Blocks-based Animation APIanimateWithDuration: animations: Simple AnimationsanimateWithDuration: animations: Simple Animations with completion: completion callbackanimateWithDuration: delay: More complex with options: animations: customizable options completion:
  29. 29. Blocks-based Animation APIanimateWithDuration: animations: Simple AnimationsanimateWithDuration: animations: Simple Animations with completion: completion callbackanimateWithDuration: delay: More complex with options: animations: customizable options completion:
  30. 30. Animation OptionsUIViewAnimationOption • Bit mask to specify animation behavior • Repeating and autoreverse behavior • Enabling user interaction • Blocks-based API defaults to NO • Specifying animation curves • Beginning an animation from current state • Property inheritance
  31. 31. View Transitions • UIView provides common animated transitions • Reveals, Slides, Flips, Curls, etc. • Transitions performed using: • transitionWithView: • transitionFromView:toView: • Transitions behavior customized with animation options mask
  32. 32. Animation Demos
  33. 33. Summary• CA provides powerful, easy to use API • Lightweight • Hardware accelerated • Robust animations without OpenGL• UIView and Core Animation • UIKit provides support for common animations • Can use Core Animation directly where more power and flexibility is needed

×