Crafting Interactions with Core Animation

Use Core Animation in your Xamarin.iOS applications to invite interaction and delight users. In this talk we explore the architecture and most common uses of Core Animation as well as some advanced Tweening and Easing techniques.

Demo Code: http://j.mp/13mM5Vb

Transcript

1. Crafting Interactions
   with Core Animation
   Friday, April 19, 13
   

   View Slide

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

   View Slide

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

   View Slide

4. Animation as Experience
   Friday, April 19, 13
   

   View Slide

5. 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
   

   View Slide

6. Apps should invite interaction.
   Friday, April 19, 13
   

   View Slide

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

   View Slide

8. Nor be scary.
   Friday, April 19, 13
   

   View Slide

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

   View Slide

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

    View Slide

11. 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
    

    View Slide

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

    View Slide

13. 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
    

    View Slide

14. Architecture
    Friday, April 19, 13
    

    View Slide

15. 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
    

    View Slide

16. 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
    

    View Slide

17. 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
    

    View Slide

18. 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
    

    View Slide

19. 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
    

    View Slide

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

    View Slide

21. 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
    

    View Slide

22. 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
    

    View Slide

23. Implicit Animations
    Friday, April 19, 13
    

    View Slide

24. 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
    

    View Slide

25. Notifications Demo
    Friday, April 19, 13
    

    View Slide

26. 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
    

    View Slide

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

    View Slide

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

    View Slide

29. Glow Pulse Demo
    Friday, April 19, 13
    

    View Slide

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

    View Slide

31. Explicit Animations
    Friday, April 19, 13
    

    View Slide

32. 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
    

    View Slide

33. 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
    

    View Slide

34. Attraction Loop Demo
    Friday, April 19, 13
    

    View Slide

35. 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
    

    View Slide

36. 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
    

    View Slide

37. 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
    

    View Slide

38. 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
    

    View Slide

39. Friday, April 19, 13
    

    View Slide

40. Friday, April 19, 13
    

    View Slide

41. Infographic Demo
    Friday, April 19, 13
    

    View Slide

42. PaintCode, DrawScript
    Friday, April 19, 13
    

    View Slide

43. 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
    

    View Slide

44. Easing Tweens
    Friday, April 19, 13
    

    View Slide

45. Remember This?
    Friday, April 19, 13
    

    View Slide

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

    View Slide

47. Bounce Demo
    Friday, April 19, 13
    

    View Slide

48. 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
    

    View Slide

49. 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
    

    View Slide

50. 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
    

    View Slide

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

    View Slide

52. Resources
    Friday, April 19, 13
    

    View Slide

53. 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
    

    View Slide

54. Thanks!
    @davidortinau
    http://davidortinau.com
    dave@davidortinau.com
    Friday, April 19, 13
    

    View Slide