Mastering Core Animation

A walkthrough of Core Animation framework

Transcript

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

   View Slide

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

   View 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 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 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 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 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 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 Slide

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

   View 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 Slide

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

    View Slide

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

    View Slide

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

    View 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 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 Slide

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

    View 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 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 Slide

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

    View 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 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 Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide