$30 off During Our Annual Pro Sale. View Details »

Crafting Interactions with Core Animation

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

David Ortinau

April 17, 2013
Tweet

More Decks by David Ortinau

Other Decks in Programming

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
    [email protected]
    Friday, April 19, 13

    View Slide