Crafting Interactionswith Core Animation
David Ortinau@davidortinauhttp://davidortinau.com17 yrs web, desktop, interactive, mobile.BA English,Maryville University
Let’s Talk AboutAnimationArchitecture of Core AnimationImplicit Animations and Explicit AnimationsTweening!Real World Use ...
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 m...
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 (...
Architecture
https://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/CoreAnimation_guide/Introduction/Introduction.html...
Every UIView has a CALayerUIViews are responsible for interactionsCALayers are responsible for what you see••UIView someVi...
What you see is a compositing of layersUIViewCALayerUIViewUIViewUIImageUILabelUIButtonUIButtonUIButtonUIButtonUIButtonUIBu...
CALayerEvery UIView has a layer and sets itself as the delegate for that layerCALayer manages visual content and the geome...
Layer Geometryhttps://developer.apple.com/library/mac/#documentation/GraphicsImaging/Reference/CALayer_class/Introduction/...
What Core Animation ProvidesInterpolationTimingHardware Accelerated. Animations happen on the GPU.Animations are on a back...
CALayer HierarchyCAShapeLayerCATileLayerCATextLayerCAScrollLayerCAReplicatorLayer•••••https://developer.apple.com/library/...
Animation RenderingLayout is on the CPU. Keep visuals flat for better performance.Animation is on the GPU.••WWDC Session 2...
Implicit Animations
Implicit Animations of Layer-Backed ViewsUses default timing and animation propertiesUIView must be wrapped in an Animate ...
Notifications Demo
Animate BlockUIView.Animate (duration: 4,delay: 0,options: UIViewAnimationOptions.CurveEaseIn,animation: () => {notificati...
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: ...
Explicit Animations
Explicit AnimationsCABasicAnimation, CAGroupAnimation, CAKeyframeAnimationMore fine grain control of the animationOnly wor...
CABasicAnimationKeyPath - the property to animateBeginTime - when in time to start, can be used to staggersequenced animat...
Attraction Loop Demo
FlowcreateSlide() - adds or updates CALayer with new imagestransitionIn() - clears old animations, defines new animations,...
CABasicAnimationtitleImage.RemoveAllAnimations();var localMediaTime = CAAnimation.CurrentMediaTime();var titleAnim = CABas...
Everyone Wants to Spinvar spinAnim = new CABasicAnimation {KeyPath = "transform.rotation.z",To = NSNumber.FromDouble( Math...
CAKeyframeAnimationAnimate along a pathSet keyframes for very fine control of the timingPropertiesPath - a bezier curve to...
Infographic Demo
PaintCode, DrawScript
CAKeyframeAnimationvoid animateDot () {CAKeyFrameAnimation keyFrameAnimation = (CAKeyFrameAnimation)CAKeyFrameAnimation.Fr...
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 st...
TweenBuilderpublic static NSObject[] CreateKeyValues (float fromValue, float toValue, EasingFormula easingFormula, intstep...
Using Keyframe Easing Functionsvar localMediaTime = CAAnimation.CurrentMediaTime();NSObject[] keyframes = TweenBuilder.Cre...
If You Can’t Animate It, Fake It
Resources
ResourcesWWDC 2010Core Animation In Practicehttps://developer.apple.com/videos/wwdc/2010/?id=424https://developer.apple.co...
If We Have TimeHow to interact with UIView during animation. Notification demo.How to kill an animation. Attraction Loop d...
Thanks!@davidortinauhttp://davidortinau.comdave@davidortinau.com
Crafting interactions with Core Animations, David Ortinau
Crafting interactions with Core Animations, David Ortinau
Crafting interactions with Core Animations, David Ortinau
Crafting interactions with Core Animations, David Ortinau
Crafting interactions with Core Animations, David Ortinau
Crafting interactions with Core Animations, David Ortinau
Crafting interactions with Core Animations, David Ortinau
Crafting interactions with Core Animations, David Ortinau
Crafting interactions with Core Animations, David Ortinau
Crafting interactions with Core Animations, David Ortinau
Upcoming SlideShare
Loading in …5
×

Crafting interactions with Core Animations, David Ortinau

3,249 views

Published on

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,249
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
25
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Crafting interactions with Core Animations, David Ortinau

  1. 1. Crafting Interactionswith Core Animation
  2. 2. David Ortinau@davidortinauhttp://davidortinau.com17 yrs web, desktop, interactive, mobile.BA English,Maryville University
  3. 3. Let’s Talk AboutAnimationArchitecture of Core AnimationImplicit Animations and Explicit AnimationsTweening!Real World Use Cases•••••
  4. 4. Animation?
  5. 5. http://www.nestmagazine.es/2012/04/entrevista-kyle-bean.html
  6. 6. 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.
  7. 7. Bill Moggridge’s 3 QuestionsHow do you do?How do you feel?How do you know?1.2.3.
  8. 8. Core Animation Makes it EasyUIView.Animate (duration: 4,animation: () => {notification.Frame = new RectangleF (newPointF (0, 0), notification.Frame.Size);});
  9. 9. Architecture
  10. 10. https://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/CoreAnimation_guide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40004514UIKit /AppKitOpenGL ES / OpenGLGraphics HardwareCoreAnimationCore GraphicsCAAnimationCAGroupAnimationCAPropertyAnimationCABasicAnimationCAKeyframeAnimationCATransitionCALayeraddSubLayerinsertSubLayersetNeedsDisplaysetNeedsLayout
  11. 11. 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);
  12. 12. What you see is a compositing of layersUIViewCALayerUIViewUIViewUIImageUILabelUIButtonUIButtonUIButtonUIButtonUIButtonUIButtonUIViewCALayerUIViewUIButtonUIButtonUIButtonUIButtonUIButtonUIButtonUIViewUIImageUILabel
  13. 13. 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.htmlCALayer someLayer = new CALayer();someLayer.Frame = new RectangleF(0, 0, 300, 40);someLayer.Contents = UIImage.FromFile(path/to/image.png).CGImage;
  14. 14. Layer Geometryhttps://developer.apple.com/library/mac/#documentation/GraphicsImaging/Reference/CALayer_class/Introduction/Introduction.htmlxy+BoundsAnchorPointBounds - CGRectPosition - CGPointAnchorPoint - CGPointTransform-CATransform3D••••
  15. 15. What Core Animation ProvidesInterpolationTimingHardware Accelerated. Animations happen on the GPU.Animations are on a background thread••••
  16. 16. CALayer HierarchyCAShapeLayerCATileLayerCATextLayerCAScrollLayerCAReplicatorLayer•••••https://developer.apple.com/library/mac/#documentation/GraphicsImaging/Reference/CALayer_class/Introduction/Introduction.html
  17. 17. 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 Animations1. Create animation and update view hierarchy2. Prepare and commitanimation3. Render each frame
  18. 18. Implicit Animations
  19. 19. Implicit Animations of Layer-Backed ViewsUses default timing and animation propertiesUIView must be wrapped in an Animate blockUIView PropertiesFrameCenterBackgroundColorOpacity•••••••
  20. 20. Notifications Demo
  21. 21. Animate BlockUIView.Animate (duration: 4,delay: 0,options: UIViewAnimationOptions.CurveEaseIn,animation: () => {notification.Frame = new RectangleF(new PointF (0, 0), notification.Frame.Size);} ,completion: null);
  22. 22. UIViewAnimationOptionsAllowUserInteractionAutoreverseCurveLinear, CurveEaseIn, CurveEaseOut, CurveEaseInEaseOutRepeat••••
  23. 23. UIViewAnimationOptionsEasing is the pace of the animation over time•
  24. 24. Glow Pulse Demo
  25. 25. UIView.Animate(duration: 1,delay: 0,options: UIViewAnimationOptions.Autoreverse |UIViewAnimationOptions.Repeat,animation: ()=>{glow.Alpha = 1;} ,completion: null);
  26. 26. Explicit Animations
  27. 27. 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•••••••
  28. 28. 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•••••••
  29. 29. Attraction Loop Demo
  30. 30. FlowcreateSlide() - adds or updates CALayer with new imagestransitionIn() - clears old animations, defines new animations, adds them tolayers, Timer calls transitionOuttransitionOut() - defines out animations, adds to layers, AnimationStoppedsignals endcyclesSlides() - increments slide and restarts the loop calling createSlide
  31. 31. 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();
  32. 32. 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" );
  33. 33. 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••••••
  34. 34. Infographic Demo
  35. 35. PaintCode, DrawScript
  36. 36. 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);}
  37. 37. Easing Tweens
  38. 38. Remember This?
  39. 39. http://www.robertpenner.com/easing/
  40. 40. Bounce Demo
  41. 41. 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/
  42. 42. TweenBuilderpublic 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;}
  43. 43. Using Keyframe Easing Functionsvar 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" );
  44. 44. If You Can’t Animate It, Fake It
  45. 45. Resources
  46. 46. ResourcesWWDC 2010Core Animation In Practicehttps://developer.apple.com/videos/wwdc/2010/?id=424https://developer.apple.com/videos/wwdc/2010/?id=425WWDC 2011 - Core Animation Essentialshttps://developer.apple.com/videos/wwdc/2011/?id=421WWDC 2012 - iOS App Performance: Graphics and Animationhttps://developer.apple.com/videos/wwdc/2012/?id=238Delighting Your Users With Core Animation - Frank Kruegerhttp://www.youtube.com/watch?v=6JePwHjVj6U&noredirect=1http://www.slideshare.net/Xamarin/delight-your-users-with-coreanimationAbout Core Animationhttps://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/CoreAnimation_guide/Introduction/Introduction.htmlRobert Penners Easing Functionshttp://www.robertpenner.com/easing/Robin Debreuil’s Swf2XNA Respositoryhttp://github.com/debreuil/Swf2XNA•••••••
  47. 47. If We Have TimeHow to interact with UIView during animation. Notification demo.How to kill an animation. Attraction Loop demo.••
  48. 48. Thanks!@davidortinauhttp://davidortinau.comdave@davidortinau.com

×