Mastering Time And Space

Mastering Time And Space

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

167f2c9daf3e040134359926747a510b?s=128

Jérémie Laval

October 10, 2014
Tweet

Transcript

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

    2014
  2. None
  3. In a Magic Kingdom Somewhere in Florida Xamarin Evolve 2014

    ANIMATION STUDIOS 
  4. None
  5. None
  6. None
  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
  8. THE ILLUSION OF LIFE Frank Thomas & Ollie Johnston Disney

    Animation
  9. None
  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
  11. Wait a minute why are we talking about this? Xamarin

    Evolve 2014
  12. Mobile is also made alive Xamarin Evolve 2014

  13. Instill life into content Xamarin Evolve 2014

  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”
  15. Touch Sensors Voice Physics Animations How do we do it?

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

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

  19. .Animate( , , , , ); property from → to

    values duration delay interpolator Common Ground
  20. IEasingFunction ITimeInterpolator CAMediaTimingFunction Interpolator Types Xamarin Evolve 2014

  21. double Interpolate( double t ); Eased value Normalized time [0-1]

    Usual Definition Xamarin Evolve 2014
  22. Deceleration Acceleration Input Output Xamarin Evolve 2014

  23. Input Output Xamarin Evolve 2014 half-time

  24. Input Output Xamarin Evolve 2014 half-time

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

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

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

  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
  29. Xamarin Evolve 2014 github.com/garuma/xamagic Xamagic

  30. Timing Squash & Stretch Anticipation Xamarin Evolve 2014

  31. Anticipation art by cento lodigiani

  32. Squash & Stretch art by cento lodigiani

  33. Timing art by cento lodigiani keyframes keyframes

  34. Motion Design

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