Core Animation: Beyond the Basics


Published on

If you want to do more than simple rotations and translations, then this presentation will help you learn some new tricks. I cover chaining/grouping animation and particle effects. Demos can be found here:

Published in: Technology, Education
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • fromValue, toValue, and byValue must be objects.\n
  • NSValue can wrap other objects too, such as CGSize and CGPoint.\n
  • \n
  • \n
  • Block animations will fulfill 95% of your animation needs.\n
  • The transform property can scale, rotate, translate, sheer, and flip a view.\n
  • \n
  • \n
  • The interpolation function may be changed to get different effects.\n
  • \n
  • Don’t forget manual memory management. Core Graphics is C code. \n
  • \n
  • Particle effects can be used for fire, water, wind, fog, smoke, explosions, etc. \n
  • Many of these properties have a range variant (ex. lifetime and lifetimeRange). \n
  • Rather than create a custom UIView, you can instead create a standard CAEmitterLayer and add it as a sub-layer.\n
  • Animated flask\nParticle effect\nApple Fireworks\n
  • \n
  • \n
  • Core Animation: Beyond the Basics

    1. 1. Core Animation:Beyond the BasicsRobert Brown@robby_brown
    2. 2. What is Core AnimationAn animation framework that is fast, efficient, and easyto useProvides a high-level, layer-centric abstractionNot intended for high-end games Use OpenGL, Cocos2D/3D, Unity, or UDK instead
    3. 3. Reviewing the Basics
    4. 4. CABasicAnimationProvides some basic properties: fromValue toValue byValue
    5. 5. CABasicAnimationfromValue & toValue => Interpolates from fromValue totoValuefromValue & byValue => Interpolates from fromValue to(fromValue + byValue)byValue & toValue => Interpolates from (toValue -byValue) to toValue
    6. 6. CABasicAnimationfromValue => Interpolates from current value tofromValuetoValue => Interpolates from toValue to current valuebyValue => Interpolates from current value to (currentvalue + byValue)
    7. 7. CABasicAnimationCABasicAnimation * scaleAnimation =[CABasicAnimation animationWithKeyPath:@"transform.scale"]; scaleAnimation.duration = 1.0f; // CGFloat scaleAnimation.fromValue = @0.0f; // NSNumber scaleAnimation.toValue = @1.0f; // NSNumber [myView.layer addAnimation:scaleAnimation forKey:@"scale"];
    8. 8. CABasicAnimationCABasicAnimation * shrinkAnimation =[CABasicAnimation animationWithKeyPath:@"frame"]; shrinkAnimation.duration = 1.0f; shrinkAnimation.fromValue = [NSValue valueWithCGRect: CGRectMake(0.0f, 0.0f, 320.0f, 480.0f)]; shrinkAnimation.toValue = [NSValue valueWithCGRect: CGRectMake(80.0f, 120.0f, 160.0f, 240.0f)]; [myView.layer addAnimation:shrinkAnimation forKey:@"shrink"];
    9. 9. CAAnimationGroupAllows many animations to be run simultaneously onthe same layerChanging the duration of the group affects each of theanimations in the group
    10. 10. CAAnimationGroupCAAnimationGroup * group = [CAAnimationGroup animation]; group.duration = 1.0f; group.animations = @[moveAnimation, scaleAnimation]; [myView.layer addAnimation:group forKey:@"group"];
    11. 11. UIView Block AnimationUIView provides a convenient method called+animateWithDuration:animations:completion:Most UIView properties are animatableBlock animation can do anything a group of basicanimations can do
    12. 12. UIView AnimatableProperties frame alpha bounds backgroundColor center contentStretch transform
    13. 13. UIView Block AnimationmyView.transform = CGAffineTransformMakeScale(0.0f, 0.0f);[UIView animateWithDuration:1.0f animations:^{ CGPoint center =; center.y += 10.0f; = center; myView.transform = CGAffineTransformMakeScale(1.0f, 1.0f);}];
    14. 14. Beyond the Basics
    15. 15. CAKeyFrameAnimationAllows specific values at specific timesCore Animation interpolates between specified valuesAlternatively allows a path to be specified
    16. 16. CAKeyFrameAnimation CAKeyframeAnimation * scaleAnimation =[CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];scaleAnimation.keyTimes = @[@0.0f, @0.1f, @0.6f, @1.0f];scaleAnimation.values = @[@0.0f, @1.0f, @1.0f, @0.0f];[myView.layer addAnimation:scaleAnimation forKey:@"scale"];
    17. 17. CAKeyFrameAnimationCAKeyframeAnimation * moveAnimation =[CAKeyframeAnimation animationWithKeyPath:@"position"]; moveAnimation.calculationMode = kCAAnimationLinear; CGMutablePathRef curvedPath = CGPathCreateMutable(); CGPathMoveToPoint(curvedPath, NULL, fromPoint.x, fromPoint.y); CGPathAddCurveToPoint(curvedPath, NULL, fromPoint.x, toPoint.y, fromPoint.x, toPoint.y, toPoint.x, toPoint.y); moveAnimation.path = curvedPath; CGPathRelease(curvedPath);[myView.layer addAnimation:moveAnimation forKey:@"move"];
    18. 18. Demo
    19. 19. CAEmitterLayerUsed for particle effectsAutomatically creates and animates particles fromCAEmitterCell objectsMany properties have built-in random rangesAvailable since iOS 5
    20. 20. CAEmitterCellcontents scaleSpeed magnificationFiltercolor velocity emissionLatitudeemitterCells scale emissionLongitudespin redSpeed xAccelerationlifetime greenSpeed yAccelerationname blueSpeed zAccelerationbirthRate alphaSpeed ...and many more
    21. 21. CAEmitterLayer1.Create a custom UIView2.Set layer class to CAEmitterLayer3.Create CAEmitterCell(s)4.Add the cell(s) to the layer.5.(Optional) Add sub-cell(s) to the layer’s cell(s)
    22. 22. Demo
    23. 23. Want to Learn More?Core Animation for Mac OS X and the iPhoneWWDC 2010 424/425WWDC 2011 421WWDC 2012 238Apple Docs
    24. 24. Questions?