Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

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?