• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Core Animation
 

Core Animation

on

  • 15,771 views

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

Statistics

Views

Total Views
15,771
Views on SlideShare
11,972
Embed Views
3,799

Actions

Likes
27
Downloads
305
Comments
0

14 Embeds 3,799

http://www.bobmccune.com 3555
http://www.scoop.it 142
http://rypearts.com 42
http://www.linkedin.com 31
http://bobmccune.com 10
http://translate.googleusercontent.com 4
http://a0.twimg.com 3
http://us-w1.rockmelt.com 3
http://www.techgig.com 3
https://twitter.com 2
http://twitter.com 1
http://webcache.googleusercontent.com 1
https://abs.twimg.com 1
http://www.pinterest.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Core Animation Core Animation Presentation Transcript

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