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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Core Animation

16,690

Published on

Core Animation prepared for March 2011 Minnesota CocoaHeads meeting. …

Core Animation prepared for March 2011 Minnesota CocoaHeads meeting.

Sample code available at:

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

Published in: Technology
0 Comments
32 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
16,690
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
337
Comments
0
Likes
32
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. Creating Animated UIs withCore Animation http://bobmccune.com
  • 2. Agenda• Overview of Core Animation • Layers • Animations • Transformations• Practical Animations • UIKit Animations • New features in iOS 4
  • 3. Why is animation important?
  • 4. Why is animation important?• Provides Context• Aides in Learning• Natural Interface• Consistency
  • 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. Core Animation Architecture Rendered UIKit in GPU Core Animation Open GL Hardware
  • 7. Understanding Layers
  • 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. CALayer Content• Set contents property • CGImageRef• Draw content in CGContextRef • Delegation: drawLayer:inContext: • Subclass: drawInContext:• Specialized Layers: • CAShapeLayer, CATextLayer, AVPlayerLayer, CAGradientLayer, etc.
  • 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. Layer Geometry X• bounds• position• transform Y• anchorPoint anchorPoint• frame bounds position
  • 12. Creating Animations
  • 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. Explicit Animations • Core Animation provides support for explicit animations • Provides more fine-grained control • Primary classes • CABasicAnimation • CAKeyframeAnimation • CAAnimationGroup
  • 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. 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. 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. 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. CAKeyframeAnimationExampleCAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];animation.path = path; // CGPathRefanimation.duration = 2.0f;animation.rotationMode = kCAAnimationRotateAuto;[layer addAnimation:animation forKey:@"animatePosition"];
  • 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. 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. Animation Demos
  • 23. UIKit Animations
  • 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. 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. Animating Views in iOS < 4.0[UIView beginAnimations:@"fadeMe" context:NULL];[UIView setAnimationDuration:1.0];self.megaManView.alpha = 0.0f;[UIView commitAnimations];
  • 27. View Animations in iOS 4[UIView animateWithDuration:1.0 animations:^{ self.megaManView.alpha = 0.0f; }];
  • 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. Blocks-based Animation APIanimateWithDuration: animations: Simple AnimationsanimateWithDuration: animations: Simple Animations with completion: completion callbackanimateWithDuration: delay: More complex with options: animations: customizable options completion:
  • 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. 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. Animation Demos
  • 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

×