Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mastering Core Animation

Felix Chern
September 10, 2012

Mastering Core Animation

A walkthrough of Core Animation framework

Felix Chern

September 10, 2012
Tweet

More Decks by Felix Chern

Other Decks in Technology

Transcript

  1. Mastering
    Core Animation
    Felix Chern (dryman)
    12年9月10日星期⼀一

    View full-size slide

  2. Felix Chern
    (dryman)
    Research assistant &
    iOS developer
    github id: idryman
    twitter id: @idryman
    blog: idryman.org
    12年9月10日星期⼀一

    View full-size slide

  3. Core Animation
    • Low level objective c rendering and
    animation classes used by UIView and UIKit
    • High performance rendering with simple
    programming model
    • Lightweight data structure
    12年9月10日星期⼀一

    View full-size slide

  4. - classes
    • CAAnimation
    • CAAnimationGroup
    • CABasicAnimation
    • CADisplayLink
    • CAEAGLLayer
    • CAKeyframeAnimation
    • CALayer
    • CAEmitterCell
    • CAEmitterLayer
    • CAGradientLayer
    • CAMediaTimingFunction
    • CAPropertyAnimation
    • CAScrollLayer
    • CATextLayer
    • CATiledLayer
    • CATransaction
    • CATransition
    - protocols
    • CAAction
    • CALayoutManager
    • CAMediaTiming
    QuartzCore/QuartzCore.h
    12年9月10日星期⼀一

    View full-size slide

  5. - classes
    • CAAnimation
    • CAAnimationGroup
    • CABasicAnimation
    • CADisplayLink
    • CAEAGLLayer
    • CAKeyframeAnimation
    • CALayer
    • CAEmitterCell
    • CAEmitterLayer
    • CAGradientLayer
    • CAMediaTimingFunction
    • CAPropertyAnimation
    • CAScrollLayer
    • CATextLayer
    • CATiledLayer
    • CATransaction
    • CATransition
    - protocols
    • CAAction
    • CALayoutManager
    • CAMediaTiming
    Layer provides
    contents
    12年9月10日星期⼀一

    View full-size slide

  6. - classes
    • CAAnimation
    • CAAnimationGroup
    • CABasicAnimation
    • CADisplayLink
    • CAEAGLLayer
    • CAKeyframeAnimation
    • CALayer
    • CAEmitterCell
    • CAEmitterLayer
    • CAGradientLayer
    • CAMediaTimingFunction
    • CAPropertyAnimation
    • CAScrollLayer
    • CATextLayer
    • CATiledLayer
    • CATransaction
    • CATransition
    - protocols
    • CAAction
    • CALayoutManager
    • CAMediaTiming
    Animation defines
    how properties are
    animated
    12年9月10日星期⼀一

    View full-size slide

  7. - classes
    • CAAnimation
    • CAAnimationGroup
    • CABasicAnimation
    • CADisplayLink
    • CAEAGLLayer
    • CAKeyframeAnimation
    • CALayer
    • CAEmitterCell
    • CAEmitterLayer
    • CAGradientLayer
    • CAMediaTimingFunction
    • CAPropertyAnimation
    • CAScrollLayer
    • CATextLayer
    • CATiledLayer
    • CATransaction
    • CATransition
    - protocols
    • CAAction
    • CALayoutManager
    • CAMediaTiming
    These allows you to
    create custom
    animations and Core
    Animation add-ons
    12年9月10日星期⼀一

    View full-size slide

  8. • Much like UIView
    • can set content image, or
    draw with Quartz 2D
    • When you change properties,
    you will trigger implicit
    animations
    CALayer
    Emitter Layer
    and Cells
    CALayer with
    border and corner radius
    12年9月10日星期⼀一

    View full-size slide

  9. CAAnimation
    • implicit
    • layer.position = CGPointMake(x,y);
    • explicit
    • setup CAAnimation
    • layer addAnimation: forKey:
    • layer removeAnimationForKey:
    12年9月10日星期⼀一

    View full-size slide

  10. Explicit CAAnimation
    CABasicAnimation *animation = [CABasicAnimation
    animationWithKeyPath:@"opacity"];
    animation.fromValue = @1.0;
    animation.toValue = @0.0;
    animation.autoreverse = YES;
    animation.repeatCount = INFINITY;
    animation.duration = 2.0;
    [layer addAnimation: animation forKey:@"animateOpacity"];
    12年9月10日星期⼀一

    View full-size slide

  11. time
    property
    CABasicAnimation
    fromValue:
    toValue:
    12年9月10日星期⼀一

    View full-size slide

  12. time
    property
    CABasicAnimation
    fromValue:
    toValue:
    12年9月10日星期⼀一

    View full-size slide

  13. time
    property
    CABasicAnimation
    fromValue:
    toValue:
    time
    property
    CAKeyFrameAnimation
    fromValue:
    toValue:
    12年9月10日星期⼀一

    View full-size slide

  14. time
    property
    CABasicAnimation
    fromValue:
    toValue:
    time
    property
    CAKeyFrameAnimation
    fromValue:
    toValue:
    NSString * const kCAAnimationLinear;
    NSString * const kCAAnimationDiscrete;
    NSString * const kCAAnimationPaced;
    NSString * const kCAAnimationCubic;
    NSString * const kCAAnimationCubicPaced;
    12年9月10日星期⼀一

    View full-size slide

  15. CALayer Properties
    1 frame property
    2 bounds property
    3 position property
    4 zPosition property
    5 anchorPointZ property
    6 anchorPoint property
    7 contentsScale property
    8 – affineTransform
    9 – setAffineTransform:
    10 transform property
    11 sublayerTransform property
    1 contentsGravity property
    2 opacity property
    3 hidden property
    4 masksToBounds property
    5 doubleSided property
    6 mask property
    7 cornerRadius property
    8 borderWidth property
    9 borderColor property
    10 backgroundColor property
    11 backgroundFilters property
    12 shadowOpacity property
    13 shadowRadius property
    14 shadowOffset property
    15 shadowColor property
    16 shadowPath property
    17 filters property
    18 compositingFilter property
    19 style property
    Most Animations can be
    created by CAAnimation and
    CALayer Properties!
    12年9月10日星期⼀一

    View full-size slide

  16. Excepts...
    12年9月10日星期⼀一

    View full-size slide

  17. • Scrolling
    • Animation related to motion
    • Animation related to AVFoundation inputs
    • Animation related to other continuous
    event sources
    In these cases, we need to
    control frames ourselves
    12年9月10日星期⼀一

    View full-size slide

  18. • Pros:
    • Won’t miss any data sources
    • Easier to implement with delegates
    • Cons:
    • Does not allow frame drop
    • Harder to control timing
    Push based
    12年9月10日星期⼀一

    View full-size slide

  19. Pull based
    • Pros
    • Let CADisplayLink setup runloop, timing,
    and everything else
    • Cons
    • Event source has to be pullable
    12年9月10日星期⼀一

    View full-size slide

  20. -(void)update {
    float x_acc, y_acc, phi, a_eff;
    if (self.sharedManager.accelerometerActive) {
    CMAccelerometerData *accData = self.sharedManager.accelerometerData;
    x_acc = accData.acceleration.x;
    y_acc = accData.acceleration.y;
    } else {
    x_acc = 0;
    y_acc = -1.0;
    }
    /* calculations */
    [CATransaction begin];
    [CATransaction setDisableActions:YES];
    self.bar1.angle = self.current[0];
    self.bar2.angle = self.current[1];
    self.bar2.position = self.bar1.tailPosition;
    self.emitterLayer.emitterPosition = self.bar1.tailPosition;
    self.emitterCell.birthRate = floorf(fabsf(self.current[2]-self.current[3])*10);
    self.emitterCell.velocity = fabsf(self.bar1.length*self.current[2]);
    [CATransaction commit];
    }
    _displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(update)];
    [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
    Pull data from accelerometer
    Disable implicit animation
    Setup CADisplayLink for updating data
    Use [_displayLink setPause:YES]
    to stop animation
    12年9月10日星期⼀一

    View full-size slide

  21. Custom CAAnimation
    • Use CADisplayLink for runloop
    • CATransaction for stoping implicit
    animation
    • Confirms to CAMediaTiming protocol
    • Use CACurrentMediaTime to pull
    timestamp
    12年9月10日星期⼀一

    View full-size slide

  22. Tips and Tricks
    12年9月10日星期⼀一

    View full-size slide

  23. KeyValue Coding
    [mySubLayer setName: @"rocket"];
    otherLayer.emitterCells = @[mySubLayer, ...];
    [otherLayer setValue: @3.0 forKeyPath:
    @"emitterCells.rocket.emissionRange"];
    12年9月10日星期⼀一

    View full-size slide

  24. More on explicit
    Animation
    [CATranscation begin];
    [CATranscation setDisableActions:YES];
    circleLayer.opacity = 0;
    CABasicAnimation *fade;
    fade = [CABasicAnimation animationWithKeyPath:@"opacity"];
    fade.duration = 1;
    fade.fromValue = @1.0;
    fade.toValue = @0.0;
    fade.beginTime = CACurrentMediaTime() + 3.0;
    [circleLayer addAnimation:fade forKey:@"fade"];
    [CATranscation commit];
    The layer opacity will be 0 after
    the animation ends
    12年9月10日星期⼀一

    View full-size slide

  25. CAEmitterLayer &
    CAEmitterCell
    Off screen
    rendering
    12年9月10日星期⼀一

    View full-size slide

  26. Instruments
    12年9月10日星期⼀一

    View full-size slide

  27. Instruments
    12年9月10日星期⼀一

    View full-size slide

  28. Instruments
    12年9月10日星期⼀一

    View full-size slide

  29. Instruments
    12年9月10日星期⼀一

    View full-size slide

  30. Instruments
    12年9月10日星期⼀一

    View full-size slide

  31. References
    • WWDC 2011 section 421: Core Animation Essentials
    • WWDC 2012 section 211: Building Concurrent User Interface on iOS
    • WWDC 2012 section 235: iOS App Performance: Responsiveness
    • WWDC 2012 section 238: iOS App Performance: Graphics and Animations
    • WWDC 2012 section 506: Optimizing 2D Graphics and Animation
    Performances
    • iOS 5 programming -- Pushing the limits ISBN: 1119961327
    12年9月10日星期⼀一

    View full-size slide

  32. Questions?
    12年9月10日星期⼀一

    View full-size slide