Crafting Interactions with Core Animation

Use Core Animation in your Xamarin.iOS applications to invite interaction and delight users. In this talk we explore the architecture and most common uses of Core Animation as well as some advanced Tweening and Easing techniques.

Demo Code: http://j.mp/13mM5Vb

Transcript

1. Crafting Interactions with Core Animation Friday, April 19, 13
2. David Ortinau @davidortinau http://davidortinau.com 17 yrs web, desktop, interactive, mobile. BA English, Maryville University Friday, April 19, 13
3. Let’s Talk About • Animation • Architecture of Core Animation • Implicit Animations and Explicit Animations • Easing Tweens! • Real World Use Cases Friday, April 19, 13
4. Animation as Experience Friday, April 19, 13
5. http://www.nestmagazine.es/2012/04/entrevista-kyle-bean.html Phones have changes because of how we use them. Increasingly it has become about creating an experience. From phone calls to paging, news feeds, apps, etc. Friday, April 19, 13
6. Apps should invite interaction. Friday, April 19, 13
7. Our apps shouldn’t just stand there. Friday, April 19, 13
8. Nor be scary. Friday, April 19, 13
9. And most certainly not over the top. Friday, April 19, 13
10. Be attractive. Know your audience. Crafting experience is everyone’s responsibility. Friday, April 19, 13
11. 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. Friday, April 19, 13
12. Bill Verplank’s 3 Questions 1. How do you do? 2. How do you feel? 3. How do you know? Friday, April 19, 13
13. Core Animation Makes it Easy UIView.Animate ( duration: 4, animation: () => { notification.Frame = new RectangleF (new PointF (0, 0), notification.Frame.Size); } ); Friday, April 19, 13
14. Architecture Friday, April 19, 13
15. 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 Friday, April 19, 13
16. Every UIView has a CALayer • UIViews are responsible for interactions • CALayers are responsible for what you see UIView someView = new UIView(); someView.Layer.Frame = new RectangleF(0, 0, 100, 100); Friday, April 19, 13
17. 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 Friday, April 19, 13
18. 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; Friday, April 19, 13
19. 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 Friday, April 19, 13
20. What Core Animation Provides • Interpolation • Timing • Hardware Accelerated. Animations happen on the GPU. • Animations are on a background thread Friday, April 19, 13
21. CALayer Hierarchy • CAShapeLayer • CATileLayer • CATextLayer • CAScrollLayer • CAReplicatorLayer https://developer.apple.com/library/mac/#documentation/GraphicsImaging/Reference/CALayer_class/Introduction/Introduction.html Friday, April 19, 13
22. 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 Friday, April 19, 13
23. Implicit Animations Friday, April 19, 13
24. 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 Friday, April 19, 13
25. Notifications Demo Friday, April 19, 13
26. 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 ); Friday, April 19, 13
27. UIViewAnimationOptions • AllowUserInteraction • Autoreverse • CurveLinear, CurveEaseIn, CurveEaseOut, CurveEaseInEaseOut • Repeat Friday, April 19, 13
28. UIViewAnimationOptions • Easing is the pace of the animation over time Friday, April 19, 13
29. Glow Pulse Demo Friday, April 19, 13
30. UIView.Animate( duration: 1, delay: 0, options: UIViewAnimationOptions.Autoreverse | UIViewAnimationOptions.Repeat, animation: ()=>{ glow.Alpha = 1; } , completion: null ); Friday, April 19, 13
31. Explicit Animations Friday, April 19, 13
32. 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 Friday, April 19, 13
33. 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 Friday, April 19, 13
34. Attraction Loop Demo Friday, April 19, 13
35. 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 Friday, April 19, 13
36. 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(); Friday, April 19, 13
37. 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" ); Friday, April 19, 13
38. 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 Friday, April 19, 13
39. Friday, April 19, 13
40. Friday, April 19, 13
41. Infographic Demo Friday, April 19, 13
42. PaintCode, DrawScript Friday, April 19, 13
43. 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); } Friday, April 19, 13
44. Easing Tweens Friday, April 19, 13
45. Remember This? Friday, April 19, 13
46. http://www.robertpenner.com/easing/ What we really want is this made easy! Friday, April 19, 13
47. Bounce Demo Friday, April 19, 13
48. 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/ Friday, April 19, 13
49. 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; } Friday, April 19, 13
50. 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" ); Friday, April 19, 13
51. If You Can’t Animate It, Fake It Friday, April 19, 13
52. Resources Friday, April 19, 13
53. 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 Friday, April 19, 13
54. Thanks! @davidortinau http://davidortinau.com dave@davidortinau.com Friday, April 19, 13