Crafting interactions with Core Animations, David Ortinau

  • 1,744 views
Uploaded on

 

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,744
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
17
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Crafting Interactionswith Core Animation
  • 2. David Ortinau@davidortinauhttp://davidortinau.com17 yrs web, desktop, interactive, mobile.BA English,Maryville University
  • 3. Let’s Talk AboutAnimationArchitecture of Core AnimationImplicit Animations and Explicit AnimationsTweening!Real World Use Cases•••••
  • 4. Animation?
  • 5. http://www.nestmagazine.es/2012/04/entrevista-kyle-bean.html
  • 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. Bill Moggridge’s 3 QuestionsHow do you do?How do you feel?How do you know?1.2.3.
  • 8. Core Animation Makes it EasyUIView.Animate (duration: 4,animation: () => {notification.Frame = new RectangleF (newPointF (0, 0), notification.Frame.Size);});
  • 9. Architecture
  • 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. 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. What you see is a compositing of layersUIViewCALayerUIViewUIViewUIImageUILabelUIButtonUIButtonUIButtonUIButtonUIButtonUIButtonUIViewCALayerUIViewUIButtonUIButtonUIButtonUIButtonUIButtonUIButtonUIViewUIImageUILabel
  • 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. Layer Geometryhttps://developer.apple.com/library/mac/#documentation/GraphicsImaging/Reference/CALayer_class/Introduction/Introduction.htmlxy+BoundsAnchorPointBounds - CGRectPosition - CGPointAnchorPoint - CGPointTransform-CATransform3D••••
  • 15. What Core Animation ProvidesInterpolationTimingHardware Accelerated. Animations happen on the GPU.Animations are on a background thread••••
  • 16. CALayer HierarchyCAShapeLayerCATileLayerCATextLayerCAScrollLayerCAReplicatorLayer•••••https://developer.apple.com/library/mac/#documentation/GraphicsImaging/Reference/CALayer_class/Introduction/Introduction.html
  • 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. Implicit Animations
  • 19. Implicit Animations of Layer-Backed ViewsUses default timing and animation propertiesUIView must be wrapped in an Animate blockUIView PropertiesFrameCenterBackgroundColorOpacity•••••••
  • 20. Notifications Demo
  • 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. UIViewAnimationOptionsAllowUserInteractionAutoreverseCurveLinear, CurveEaseIn, CurveEaseOut, CurveEaseInEaseOutRepeat••••
  • 23. UIViewAnimationOptionsEasing is the pace of the animation over time•
  • 24. Glow Pulse Demo
  • 25. UIView.Animate(duration: 1,delay: 0,options: UIViewAnimationOptions.Autoreverse |UIViewAnimationOptions.Repeat,animation: ()=>{glow.Alpha = 1;} ,completion: null);
  • 26. Explicit Animations
  • 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. 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. Attraction Loop Demo
  • 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. 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. 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. 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. Infographic Demo
  • 35. PaintCode, DrawScript
  • 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. Easing Tweens
  • 38. Remember This?
  • 39. http://www.robertpenner.com/easing/
  • 40. Bounce Demo
  • 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. 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. 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. If You Can’t Animate It, Fake It
  • 45. Resources
  • 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. If We Have TimeHow to interact with UIView during animation. Notification demo.How to kill an animation. Attraction Loop demo.••
  • 48. Thanks!@davidortinauhttp://davidortinau.comdave@davidortinau.com