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

Transcript

1. Core Animation: Beyond the Basics Robert Brown @robby_brown
2. What is Core Animation An animation framework that is fast, efficient, and easy to use Provides a high-level, layer-centric abstraction Not intended for high-end games Use OpenGL, Cocos2D/3D, Unity, or UDK instead
3. Reviewing the Basics
4. CABasicAnimation Provides some basic properties: fromValue toValue byValue
5. CABasicAnimation fromValue & toValue => Interpolates from fromValue to toValue fromValue & byValue => Interpolates from fromValue to (fromValue + byValue) byValue & toValue => Interpolates from (toValue - byValue) to toValue
6. CABasicAnimation fromValue => Interpolates from current value to fromValue toValue => Interpolates from toValue to current value byValue => Interpolates from current value to (current value + byValue)
7. CABasicAnimation CABasicAnimation * 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. CABasicAnimation CABasicAnimation * 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. CAAnimationGroup Allows many animations to be run simultaneously on the same layer Changing the duration of the group affects each of the animations in the group
10. CAAnimationGroup CAAnimationGroup * group = [CAAnimationGroup animation]; group.duration = 1.0f; group.animations = @[moveAnimation, scaleAnimation]; [myView.layer addAnimation:group forKey:@"group"];
11. UIView Block Animation UIView provides a convenient method called +animateWithDuration:animations:completion: Most UIView properties are animatable Block animation can do anything a group of basic animations can do
12. UIView Animatable Properties frame bounds center transform alpha backgroundColor contentStretch
13. UIView Block Animation myView.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); }];
14. Beyond the Basics
15. CAKeyFrameAnimation Allows specific values at specific times Core Animation interpolates between specified values Alternatively allows a path to be specified
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. CAKeyFrameAnimation CAKeyframeAnimation * 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. Demo
19. CAEmitterLayer Used for particle effects Automatically creates and animates particles from CAEmitterCell objects Many properties have built-in random ranges Available since iOS 5
20. CAEmitterCell contents color emitterCells spin lifetime name birthRate scaleSpeed velocity scale redSpeed greenSpeed blueSpeed alphaSpeed magnificationFilter emissionLatitude emissionLongitude xAcceleration yAcceleration zAcceleration ...and many more
21. CAEmitterLayer 1.Create a custom UIView 2.Set layer class to CAEmitterLayer 3.Create CAEmitterCell(s) 4.Add the cell(s) to the layer. 5.(Optional) Add sub-cell(s) to the layer’s cell(s)
22. Demo
23. Want to Learn More? Core Animation for Mac OS X and the iPhone WWDC 2010 424/425 WWDC 2011 421 WWDC 2012 238 Apple Docs
24. Questions?