Crafting interactions with Core Animations, David Ortinau
-
Upload
xamarin -
Category
Technology
-
view
2.269 -
download
0
Transcript of 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 [email protected]