crafting interactions with core animations, david ortinau

Crafting Interactionswith Core Animation

David Ortinau@davidortinauhttp://davidortinau.com

17 yrs web, desktop, interactive, mobile.

BA English, Maryville University

Let’s Talk AboutAnimationArchitecture of Core AnimationImplicit Animations and Explicit AnimationsTweening!Real World Use Cases

•••••

Animation?

http://www.nestmagazine.es/2012/04/entrevista-kyle-bean.html

Interaction Design (IxD) defines the structure andbehavior of interactive systems.

Interaction Designers strive to create meaningfulrelationships between people and the products andservices that they use, from computers to mobiledevices to appliances and beyond.

Bill Moggridge’s 3 QuestionsHow do you do?How do you feel?How do you know?

1.2.3.

Core Animation Makes it EasyUIView.Animate ( duration: 4, animation: () => { notification.Frame = new RectangleF (newPointF (0, 0), notification.Frame.Size);

} );

Architecture

https://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/CoreAnimation_guide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40004514

UIKit /AppKit

OpenGL ES / OpenGL

Graphics Hardware

CoreAnimation

Core Graphics

CAAnimationCAGroupAnimationCAPropertyAnimationCABasicAnimationCAKeyframeAnimationCATransition

CALayeraddSubLayerinsertSubLayersetNeedsDisplaysetNeedsLayout

Every UIView has a CALayerUIViews are responsible for interactionsCALayers are responsible for what you see

••

UIView someView = new UIView();someView.LayerLayer.Frame = new RectangleF(0, 0, 100, 100);

What you see is a compositing of layersUIViewCALayerUIViewUIViewUIImageUILabelUIButtonUIButtonUIButtonUIButtonUIButtonUIButton

UIView

CALayer

UIView

UIButton

UIButton

UIButton

UIButton

UIButton

UIButton

UIView

UIImage

UILabel

CALayerEvery UIView has a layer and sets itself as the delegate for that layerCALayer manages visual content and the geometry of that contentdrawRect 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;

Layer Geometry

https://developer.apple.com/library/mac/#documentation/GraphicsImaging/Reference/CALayer_class/Introduction/Introduction.html

x

y

+

Bounds

AnchorPoint

Bounds - CGRectPosition - CGPointAnchorPoint - CGPointTransform-CATransform3D

••••

What Core Animation ProvidesInterpolationTimingHardware Accelerated. Animations happen on the GPU.Animations are on a background thread

••••

CALayer HierarchyCAShapeLayerCATileLayerCATextLayerCAScrollLayerCAReplicatorLayer

•••••

https://developer.apple.com/library/mac/#documentation/GraphicsImaging/Reference/CALayer_class/Introduction/Introduction.html

Animation RenderingLayout 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 commitanimation

3. Render each frame

Implicit Animations

Implicit Animations of Layer-Backed ViewsUses default timing and animation propertiesUIView must be wrapped in an Animate blockUIView PropertiesFrameCenterBackgroundColorOpacity

•••••••

Notifications Demo

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);

UIViewAnimationOptionsAllowUserInteractionAutoreverseCurveLinear, CurveEaseIn, CurveEaseOut, CurveEaseInEaseOutRepeat

••••

UIViewAnimationOptionsEasing is the pace of the animation over time•

Glow Pulse Demo

UIView.Animate( duration: 1, delay: 0, options: UIViewAnimationOptions.Autoreverse |UIViewAnimationOptions.Repeat,

animation: ()=>{ glow.Alpha = 1; } , completion: null);

Explicit Animations

Explicit AnimationsCABasicAnimation, CAGroupAnimation, CAKeyframeAnimationMore fine grain control of the animationOnly works on the Layer and doesn’t update the ViewFillMode = CAFillMode.ForwardsRemovedOnCompletion = falseSequence animationsCustom animation of your own properties

•••••••

CABasicAnimationKeyPath - the property to animateBeginTime - when in time to start, can be used to staggersequenced animationsDuration - how long the animation should take, scaled to thetimeline of the parentFrom / ToRemoveOnCompletion, FillModeAnimationStopped, AnimationStartedTimingFunction - Linear, EaseIn, EaseOut, EaseInEaseOut

••

•

••••

Attraction Loop Demo

FlowcreateSlide() - adds or updates CALayer with new imagestransitionIn() - clears old animations, defines new animations, adds them to

layers, Timer calls transitionOuttransitionOut() - defines out animations, adds to layers, AnimationStopped

signals endcyclesSlides() - increments slide and restarts the loop calling createSlide

CABasicAnimationtitleImage.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();

Everyone Wants to Spinvar spinAnim = new CABasicAnimation { KeyPath = "transform.rotation.z", To = NSNumber.FromDouble( Math.PI ), Duration = 0.4, Cumulative = true, RepeatCount = 999 } ;

spinner.Layer.AddAnimation( spinAnim,"spinMeRightRoundBabyRightRound" );

CAKeyframeAnimationAnimate along a pathSet keyframes for very fine control of the timingPropertiesPath - a bezier curve to followKeyTimes - 1:1 with values, from 0 to 1 over durationValues - the keyframe values at each point

••••••

Infographic Demo

PaintCode, DrawScript

CAKeyframeAnimationvoid 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);

}

Easing Tweens

Remember This?

http://www.robertpenner.com/easing/

Bounce Demo

Generating Keyframe Values for Easing EquationsNo 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/

TweenBuilder

public static NSObject[] CreateKeyValues (float fromValue, float toValue, EasingFormula easingFormula, intsteps = 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;}

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" );

If You Can’t Animate It, Fake It

Resources

ResourcesWWDC 2010

Core Animation In Practicehttps://developer.apple.com/videos/wwdc/2010/?id=424https://developer.apple.com/videos/wwdc/2010/?id=425

WWDC 2011 - Core Animation Essentialshttps://developer.apple.com/videos/wwdc/2011/?id=421

WWDC 2012 - iOS App Performance: Graphics and Animationhttps://developer.apple.com/videos/wwdc/2012/?id=238

Delighting Your Users With Core Animation - Frank Kruegerhttp://www.youtube.com/watch?v=6JePwHjVj6U&noredirect=1http://www.slideshare.net/Xamarin/delight-your-users-with-coreanimation

About Core Animationhttps://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/CoreAnimation_guide/Introduction/Introduction.html

Robert Penners Easing Functionshttp://www.robertpenner.com/easing/

Robin Debreuil’s Swf2XNA Respositoryhttp://github.com/debreuil/Swf2XNA

•

•

•

•

•

•

•

If We Have TimeHow to interact with UIView during animation. Notification demo.How to kill an animation. Attraction Loop demo.

••

Thanks!

@davidortinauhttp://davidortinau.com dave@davidortinau.com