• Save
Core Animation: Beyond the Basics
Upcoming SlideShare
Loading in...5

Core Animation: Beyond the Basics



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 ...

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: https://github.com/rob-brown/Demos.



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Apple Keynote

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • \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 Core Animation: Beyond the Basics Presentation Transcript

  • Core Animation:Beyond the BasicsRobert Brown@robby_brown
  • 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
  • Reviewing the Basics
  • CABasicAnimationProvides some basic properties: fromValue toValue byValue
  • CABasicAnimationfromValue & toValue => Interpolates from fromValue totoValuefromValue & byValue => Interpolates from fromValue to(fromValue + byValue)byValue & toValue => Interpolates from (toValue -byValue) to toValue
  • CABasicAnimationfromValue => Interpolates from current value tofromValuetoValue => Interpolates from toValue to current valuebyValue => Interpolates from current value to (currentvalue + byValue)
  • 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"];
  • 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"];
  • CAAnimationGroupAllows many animations to be run simultaneously onthe same layerChanging the duration of the group affects each of theanimations in the group
  • CAAnimationGroupCAAnimationGroup * group = [CAAnimationGroup animation]; group.duration = 1.0f; group.animations = @[moveAnimation, scaleAnimation]; [myView.layer addAnimation:group forKey:@"group"];
  • 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
  • UIView AnimatableProperties frame alpha bounds backgroundColor center contentStretch transform
  • UIView Block AnimationmyView.transform = CGAffineTransformMakeScale(0.0f, 0.0f);[UIView animateWithDuration:1.0f animations:^{ CGPoint center = myView.center; center.y += 10.0f; myView.center = center; myView.transform = CGAffineTransformMakeScale(1.0f, 1.0f);}];
  • Beyond the Basics
  • CAKeyFrameAnimationAllows specific values at specific timesCore Animation interpolates between specified valuesAlternatively allows a path to be specified
  • 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"];
  • 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"];
  • Demo
  • CAEmitterLayerUsed for particle effectsAutomatically creates and animates particles fromCAEmitterCell objectsMany properties have built-in random rangesAvailable since iOS 5
  • CAEmitterCellcontents scaleSpeed magnificationFiltercolor velocity emissionLatitudeemitterCells scale emissionLongitudespin redSpeed xAccelerationlifetime greenSpeed yAccelerationname blueSpeed zAccelerationbirthRate alphaSpeed ...and many more
  • 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)
  • Demo
  • Want to Learn More?Core Animation for Mac OS X and the iPhoneWWDC 2010 424/425WWDC 2011 421WWDC 2012 238Apple Docs
  • Questions?