Mastering Time And Space

Animations lessons from the Magic Kingdom. Talk given at Xamarin Evolve 2014

Transcript

1. Xamuraï
   @jeremie_laval
   Jérémie Laval
   Mastering Time
   and Space
   Xamarin Evolve 2014
   

   View Slide

2. View Slide

3. In a Magic Kingdom
   Somewhere in Florida
   Xamarin Evolve 2014
   ANIMATION STUDIOS
   
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. “Animation can explain whatever the mind of
   man can conceive.
   !
   This facility makes it the most versatile and
   explicit means of communication yet devised”
   Walt Disney
   Xamarin Evolve 2014
   

   View Slide

8. THE ILLUSION OF LIFE
   Frank Thomas & Ollie Johnston
   Disney Animation
   

   View Slide

9. View Slide

10. 12 principles
    Arcs
    Exaggeration
    Straight-ahead / Pose-to-pose
    Follow-through / Overlapping action
    Secondary Action
    Appeal
    Anticipation
    Squash & Stretch
    Slow-in/Slow-out
    Timing
    Staging
    Solid Drawing
    Xamarin Evolve 2014
    

    View Slide

11. Wait a minute
    why are we talking about this?
    Xamarin Evolve 2014
    

    View Slide

12. Mobile is also
    made alive
    Xamarin Evolve 2014
    

    View Slide

13. Instill life into content
    Xamarin Evolve 2014
    

    View Slide

14. Once upon a guideline
    Xamarin Evolve 2014
    “Real objects are more fun than buttons”
    “Strive for realism and credibility”
    “Bring life to the experience”
    

    View Slide

15. Touch
    Sensors
    Voice
    Physics
    Animations
    How do we do it?
    Xamarin Evolve 2014
    

    View Slide

16. View Slide

17. Animation are how we go from this:
    To this:
    Xamarin Evolve 2014
    

    View Slide

18. Storyboards
    Object animators
    Animation blocks
    Animation Frameworks
    Xamarin Evolve 2014
    

    View Slide

19. .Animate( ,
    ,
    ,
    ,
    );
    property
    from → to values
    duration
    delay
    interpolator
    Common Ground
    

    View Slide

20. IEasingFunction
    ITimeInterpolator
    CAMediaTimingFunction
    Interpolator Types
    Xamarin Evolve 2014
    

    View Slide

21. double Interpolate( double t );
    Eased value Normalized time
    [0-1]
    Usual Definition
    Xamarin Evolve 2014
    

    View Slide

22. Deceleration
    Acceleration
    Input
    Output
    Xamarin Evolve 2014
    

    View Slide

23. Input
    Output
    Xamarin Evolve 2014
    half-time
    

    View Slide

24. Input
    Output
    Xamarin Evolve 2014
    half-time
    

    View Slide

25. 1 - (1 - t)²
    t²
    Input
    Output
    Xamarin Evolve 2014
    

    View Slide

26. cb(0.42, 0, 1, 1)
    cb(0, 0, 0.58, 1)
    Input
    Output
    Xamarin Evolve 2014
    

    View Slide

27. Interpolators can craft
    any type of movement
    Xamarin Evolve 2014
    

    View Slide

28. interpolate(t) =
    8×(1.226×t)²
    8×(1.226×t - 0.54719)² + 0.7
    8×(1.226×t - 0.8526)² + 0.9
    8×(1.226×t - 1.0435)² + 0.95
    Xamarin Evolve 2014
    if t < 0.3535
    if t < 0.7408
    if t < 0.9644
    otherwise
    

    View Slide

29. Xamarin Evolve 2014
    github.com/garuma/xamagic
    Xamagic
    

    View Slide

30. Timing
    Squash & Stretch
    Anticipation
    Xamarin Evolve 2014
    

    View Slide

31. Anticipation
    art by cento lodigiani
    

    View Slide

32. Squash & Stretch
    art by cento lodigiani
    

    View Slide

33. Timing
    art by cento lodigiani
    keyframes
    keyframes
    

    View Slide

34. Motion Design
    

    View Slide

35. Jérémie Laval
    @jeremie_laval
    Xamarin Evolve 2014
    THE END
    

    View Slide