Core Animation: Beyond the Basics
•
8 j'aime•4,088 vues
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.
Recommandé
Contenu connexe
En vedette
En vedette (13)
Plus de Robert Brown
Plus de Robert Brown (15)
Dernier
Dernier (20)
Core Animation: Beyond the Basics
- 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
- 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 alpha bounds backgroundColor center contentStretch transform
- 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); }];
- 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 scaleSpeed magnificationFilter color velocity emissionLatitude emitterCells scale emissionLongitude spin redSpeed xAcceleration lifetime greenSpeed yAcceleration name blueSpeed zAcceleration birthRate alphaSpeed ...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?
Notes de l'éditeur
- \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