Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

“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

Slide 8

Slide 8 text

THE ILLUSION OF LIFE Frank Thomas & Ollie Johnston Disney Animation

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Mobile is also made alive Xamarin Evolve 2014

Slide 13

Slide 13 text

Instill life into content Xamarin Evolve 2014

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Storyboards Object animators Animation blocks Animation Frameworks Xamarin Evolve 2014

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

IEasingFunction ITimeInterpolator CAMediaTimingFunction Interpolator Types Xamarin Evolve 2014

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Deceleration Acceleration Input Output Xamarin Evolve 2014

Slide 23

Slide 23 text

Input Output Xamarin Evolve 2014 half-time

Slide 24

Slide 24 text

Input Output Xamarin Evolve 2014 half-time

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Interpolators can craft any type of movement Xamarin Evolve 2014

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Xamarin Evolve 2014 github.com/garuma/xamagic Xamagic

Slide 30

Slide 30 text

Timing Squash & Stretch Anticipation Xamarin Evolve 2014

Slide 31

Slide 31 text

Anticipation art by cento lodigiani

Slide 32

Slide 32 text

Squash & Stretch art by cento lodigiani

Slide 33

Slide 33 text

Timing art by cento lodigiani keyframes keyframes

Slide 34

Slide 34 text

Motion Design

Slide 35

Slide 35 text

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