Crafting interactions with Core Animations, David Ortinau
3 likes3,544 views
Core Animation allows developers to easily add animations and interactions to iOS and macOS apps. It provides an architecture for animating layers and views with both implicit and explicit animations. Implicit animations automatically animate view property changes, while explicit animations like CABasicAnimation and CAKeyframeAnimation give more control over animation properties. Core Animation renders animations efficiently using the GPU and provides animation types like easing to control timing.
![TweenBuilder
public static NSObject[] CreateKeyValues (float fromValue, float toValue, EasingFormula easingFormula, int
steps = 100)
{
NSObject[] values = new NSObject[steps];
double value = 0;
float curTime = 0;
for (int t = 0; t < steps; t++) {
curTime = (float)t / (float)steps;
var easingFactor = easingFormula(curTime, 0, 1);
value = (toValue - fromValue) * easingFactor + fromValue;
values[t] = NSNumber.FromDouble(value);
}
return values;
}](https://image.slidesharecdn.com/craftinginteractionswithcoreanimation-130514152322-phpapp02/85/Crafting-interactions-with-Core-Animations-David-Ortinau-52-320.jpg)
![Using Keyframe Easing Functions
var localMediaTime = CAAnimation.CurrentMediaTime();
NSObject[] keyframes = TweenBuilder.CreateKeyValues(-295, 0, Easing.EaseOutBounce);
var homeIn = new CAKeyFrameAnimation {
KeyPath = "position.x",
Duration = 1.4,
BeginTime = localMediaTime,
FillMode = CAFillMode.Forwards,
RemovedOnCompletion = false,
TimingFunction = CAMediaTimingFunction.FromName(
CAMediaTimingFunction.Linear ),
Values = keyframes
};
navHome.AddAnimation( homeIn, "homeIn" );](https://image.slidesharecdn.com/craftinginteractionswithcoreanimation-130514152322-phpapp02/85/Crafting-interactions-with-Core-Animations-David-Ortinau-53-320.jpg)
Crafting interactions with Core Animations, David Ortinau
- 1. Crafting Interactions with Core Animation
- 2. David Ortinau @davidortinau http://davidortinau.com 17 yrs web, desktop, interactive, mobile. BA English, Maryville University
- 6. Let’s Talk About Animation Architecture of Core Animation Implicit Animations and Explicit Animations Tweening! Real World Use Cases • • • • •
- 7. Animation?
- 14. Interaction Design (IxD) defines the structure and behavior of interactive systems. Interaction Designers strive to create meaningful relationships between people and the products and services that they use, from computers to mobile devices to appliances and beyond.
- 15. Bill Moggridge’s 3 Questions How do you do? How do you feel? How do you know? 1. 2. 3.
- 16. Core Animation Makes it Easy UIView.Animate ( duration: 4, animation: () => { notification.Frame = new RectangleF (new PointF (0, 0), notification.Frame.Size); } );
- 17. Architecture
- 18. https://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/CoreAnimation_guide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40004514 UIKit / AppKit OpenGL ES / Open GL Graphics Hardware Core Animation Core Graphics CAAnimation CAGroupAnimation CAPropertyAnimation CABasicAnimation CAKeyframeAnimation CATransition CALayer addSubLayer insertSubLayer setNeedsDisplay setNeedsLayout
- 19. Every UIView has a CALayer UIViews are responsible for interactions CALayers are responsible for what you see • • UIView someView = new UIView(); someView.LayerLayer.Frame = new RectangleF(0, 0, 100, 100);
- 20. What you see is a compositing of layers UIView CALayer UIView UIView UIImage UILabel UIButton UIButton UIButton UIButton UIButton UIButton UIView CALayer UIView UIButton UIButton UIButton UIButton UIButton UIButton UIView UIImage UILabel
- 21. CALayer Every UIView has a layer and sets itself as the delegate for that layer CALayer manages visual content and the geometry of that content drawRect creates the layer • • • https://developer.apple.com/library/mac/#documentation/GraphicsImaging/Reference/CALayer_class/Introduction/Introduction.html CALayer someLayer = new CALayer(); someLayer.Frame = new RectangleF(0, 0, 300, 40); someLayer.Contents = UIImage.FromFile('path/to/image.png').CGImage;
- 22. Layer Geometry https://developer.apple.com/library/mac/#documentation/GraphicsImaging/Reference/CALayer_class/Introduction/Introduction.html x y + Bounds AnchorPoint Bounds - CGRect Position - CGPoint AnchorPoint - CGPoint Transform-CATransform3D • • • •
- 23. What Core Animation Provides Interpolation Timing Hardware Accelerated. Animations happen on the GPU. Animations are on a background thread • • • •
- 25. Animation Rendering Layout is on the CPU. Keep visuals flat for better performance. Animation is on the GPU. • • WWDC Session 238 iOS App Performance: Graphics and Animations 1. Create animation and update view hierarchy 2. Prepare and commit animation 3. Render each frame
- 27. Implicit Animations of Layer-Backed Views Uses default timing and animation properties UIView must be wrapped in an Animate block UIView Properties Frame Center BackgroundColor Opacity • • • • • • •
- 29. Animate Block UIView.Animate ( duration: 4, delay: 0, options: UIViewAnimationOptions.CurveEaseIn, animation: () => { notification.Frame = new RectangleF (new PointF (0, 0), notification.Frame.Size); } , completion: null );
- 30. UIViewAnimationOptions AllowUserInteraction Autoreverse CurveLinear, CurveEaseIn, CurveEaseOut, CurveEaseInEaseOut Repeat • • • •
- 31. UIViewAnimationOptions Easing is the pace of the animation over time•
- 32. Glow Pulse Demo
- 33. UIView.Animate( duration: 1, delay: 0, options: UIViewAnimationOptions.Autoreverse | UIViewAnimationOptions.Repeat, animation: ()=>{ glow.Alpha = 1; } , completion: null );
- 35. Explicit Animations CABasicAnimation, CAGroupAnimation, CAKeyframeAnimation More fine grain control of the animation Only works on the Layer and doesn’t update the View FillMode = CAFillMode.Forwards RemovedOnCompletion = false Sequence animations Custom animation of your own properties • • • • • • •
- 36. CABasicAnimation KeyPath - the property to animate BeginTime - when in time to start, can be used to stagger sequenced animations Duration - how long the animation should take, scaled to the timeline of the parent From / To RemoveOnCompletion, FillMode AnimationStopped, AnimationStarted TimingFunction - Linear, EaseIn, EaseOut, EaseInEaseOut • • • • • • •
- 38. Flow createSlide() - adds or updates CALayer with new images transitionIn() - clears old animations, defines new animations, adds them to layers, Timer calls transitionOut transitionOut() - defines out animations, adds to layers, AnimationStopped signals end cyclesSlides() - increments slide and restarts the loop calling createSlide
- 39. CABasicAnimation titleImage.RemoveAllAnimations(); var localMediaTime = CAAnimation.CurrentMediaTime(); var titleAnim = CABasicAnimation.FromKeyPath("position.x"); titleAnim.Duration = 1; titleAnim.BeginTime = localMediaTime; titleAnim.From = NSNumber.FromFloat ( 768f ); titleAnim.To = NSNumber.FromFloat ( View.Frame.Width * 0.5f ); titleAnim.RemovedOnCompletion = false; titleAnim.FillMode = CAFillMode.Forwards; titleAnim.TimingFunction = CAMediaTimingFunction.FromName (CAMediaTimingFunction.EaseOut); titleImage.AddAnimation ( titleAnim, "position.x" ); timer = new System.Timers.Timer (); timer.Interval = 5000; timer.Elapsed += (object sender, ElapsedEventArgs e) => { timer.Stop(); InvokeOnMainThread(()=>{ transitionOut(); } ); } ; timer.Start();
- 40. Everyone Wants to Spin var spinAnim = new CABasicAnimation { KeyPath = "transform.rotation.z", To = NSNumber.FromDouble( Math.PI ), Duration = 0.4, Cumulative = true, RepeatCount = 999 } ; spinner.Layer.AddAnimation( spinAnim, "spinMeRightRoundBabyRightRound" );
- 41. CAKeyframeAnimation Animate along a path Set keyframes for very fine control of the timing Properties Path - a bezier curve to follow KeyTimes - 1:1 with values, from 0 to 1 over duration Values - the keyframe values at each point • • • • • •
- 44. Infographic Demo
- 46. CAKeyframeAnimation void animateDot () { CAKeyFrameAnimation keyFrameAnimation = (CAKeyFrameAnimation)CAKeyFrameAnimation.FromKeyPath ("position"); keyFrameAnimation.Path = animationPath.CGPath; keyFrameAnimation.Duration = 10; keyFrameAnimation.CalculationMode = CAKeyFrameAnimation.AnimationPaced; keyFrameAnimation.FillMode = CAFillMode.Forwards; keyFrameAnimation.TimingFunction = CAMediaTimingFunction.FromName (CAMediaTimingFunction.Linear); dot.AddAnimation (keyFrameAnimation, "MoveImage"); dot.Position = new PointF (222, 326); }
- 47. Easing Tweens
- 48. Remember This?
- 50. Bounce Demo
- 51. Generating Keyframe Values for Easing Equations No need to specify KeyTimes as keyframes will be dispersed evenly• public static float EaseOutBounce(float t, float start, float length) { if ((t) < (1 / 2.75f)) { return length * (7.5625f * t * t) + start; } else if (t < (2 / 2.75)) { return length * (7.5625f * (t -= (1.5f / 2.75f)) * t + .75f) + start; } else if (t < (2.5 / 2.75)) { return length * (7.5625f * (t -= (2.25f / 2.75f)) * t + .9375f) + start; } else { return length * (7.5625f * (t -= (2.625f / 2.75f)) * t + .984375f) + start; } } http://github.com/debreuil/Swf2XNA, , http://www.robertpenner.com/easing/
- 52. TweenBuilder public static NSObject[] CreateKeyValues (float fromValue, float toValue, EasingFormula easingFormula, int steps = 100) { NSObject[] values = new NSObject[steps]; double value = 0; float curTime = 0; for (int t = 0; t < steps; t++) { curTime = (float)t / (float)steps; var easingFactor = easingFormula(curTime, 0, 1); value = (toValue - fromValue) * easingFactor + fromValue; values[t] = NSNumber.FromDouble(value); } return values; }
- 53. Using Keyframe Easing Functions var localMediaTime = CAAnimation.CurrentMediaTime(); NSObject[] keyframes = TweenBuilder.CreateKeyValues(-295, 0, Easing.EaseOutBounce); var homeIn = new CAKeyFrameAnimation { KeyPath = "position.x", Duration = 1.4, BeginTime = localMediaTime, FillMode = CAFillMode.Forwards, RemovedOnCompletion = false, TimingFunction = CAMediaTimingFunction.FromName( CAMediaTimingFunction.Linear ), Values = keyframes }; navHome.AddAnimation( homeIn, "homeIn" );
- 54. If You Can’t Animate It, Fake It
- 55. Resources
- 56. Resources WWDC 2010 Core Animation In Practice https://developer.apple.com/videos/wwdc/2010/?id=424 https://developer.apple.com/videos/wwdc/2010/?id=425 WWDC 2011 - Core Animation Essentials https://developer.apple.com/videos/wwdc/2011/?id=421 WWDC 2012 - iOS App Performance: Graphics and Animation https://developer.apple.com/videos/wwdc/2012/?id=238 Delighting Your Users With Core Animation - Frank Krueger http://www.youtube.com/watch?v=6JePwHjVj6U&noredirect=1 http://www.slideshare.net/Xamarin/delight-your-users-with-coreanimation About Core Animation https://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/CoreAnimation_guide/Introduction/Introduction.html Robert Penners Easing Functions http://www.robertpenner.com/easing/ Robin Debreuil’s Swf2XNA Respository http://github.com/debreuil/Swf2XNA • • • • • • •
- 57. If We Have Time How to interact with UIView during animation. Notification demo. How to kill an animation. Attraction Loop demo. • •