Slide 1

Slide 1 text

Crafting Interactions with Core Animation Friday, April 19, 13

Slide 2

Slide 2 text

David Ortinau @davidortinau http://davidortinau.com 17 yrs web, desktop, interactive, mobile. BA English, Maryville University Friday, April 19, 13

Slide 3

Slide 3 text

Let’s Talk About • Animation • Architecture of Core Animation • Implicit Animations and Explicit Animations • Easing Tweens! • Real World Use Cases Friday, April 19, 13

Slide 4

Slide 4 text

Animation as Experience Friday, April 19, 13

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Apps should invite interaction. Friday, April 19, 13

Slide 7

Slide 7 text

Our apps shouldn’t just stand there. Friday, April 19, 13

Slide 8

Slide 8 text

Nor be scary. Friday, April 19, 13

Slide 9

Slide 9 text

And most certainly not over the top. Friday, April 19, 13

Slide 10

Slide 10 text

Be attractive. Know your audience. Crafting experience is everyone’s responsibility. Friday, April 19, 13

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Bill Verplank’s 3 Questions 1. How do you do? 2. How do you feel? 3. How do you know? Friday, April 19, 13

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Architecture Friday, April 19, 13

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

What Core Animation Provides • Interpolation • Timing • Hardware Accelerated. Animations happen on the GPU. • Animations are on a background thread Friday, April 19, 13

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Implicit Animations Friday, April 19, 13

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Notifications Demo Friday, April 19, 13

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

UIViewAnimationOptions • AllowUserInteraction • Autoreverse • CurveLinear, CurveEaseIn, CurveEaseOut, CurveEaseInEaseOut • Repeat Friday, April 19, 13

Slide 28

Slide 28 text

UIViewAnimationOptions • Easing is the pace of the animation over time Friday, April 19, 13

Slide 29

Slide 29 text

Glow Pulse Demo Friday, April 19, 13

Slide 30

Slide 30 text

UIView.Animate( duration: 1, delay: 0, options: UIViewAnimationOptions.Autoreverse | UIViewAnimationOptions.Repeat, animation: ()=>{ glow.Alpha = 1; } , completion: null ); Friday, April 19, 13

Slide 31

Slide 31 text

Explicit Animations Friday, April 19, 13

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Attraction Loop Demo Friday, April 19, 13

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Friday, April 19, 13

Slide 40

Slide 40 text

Friday, April 19, 13

Slide 41

Slide 41 text

Infographic Demo Friday, April 19, 13

Slide 42

Slide 42 text

PaintCode, DrawScript Friday, April 19, 13

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Easing Tweens Friday, April 19, 13

Slide 45

Slide 45 text

Remember This? Friday, April 19, 13

Slide 46

Slide 46 text

http://www.robertpenner.com/easing/ What we really want is this made easy! Friday, April 19, 13

Slide 47

Slide 47 text

Bounce Demo Friday, April 19, 13

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

If You Can’t Animate It, Fake It Friday, April 19, 13

Slide 52

Slide 52 text

Resources Friday, April 19, 13

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Thanks! @davidortinau http://davidortinau.com [email protected] Friday, April 19, 13