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
3. In a Magic Kingdom Somewhere in Florida Xamarin Evolve 2014 ANIMATION STUDIOS
   
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
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
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