Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Mastering Time And Space
Search
Jérémie Laval
October 10, 2014
Technology
1
190
Mastering Time And Space
Animations lessons from the Magic Kingdom. Talk given at Xamarin Evolve 2014
Jérémie Laval
October 10, 2014
Tweet
Share
More Decks by Jérémie Laval
See All by Jérémie Laval
Abusing Async/Await (for fun and profit)
garuma
0
380
Beautiful Android Apps
garuma
0
50
What's new in Android M
garuma
0
47
Developing for Android Wear, welcome to the wrist world
garuma
0
61
Material Design: From Concept to Implementation
garuma
0
150
Tips & Tricks to spice up your Android app
garuma
0
96
Introduction to Android Animations
garuma
0
110
Monomobile
garuma
0
83
Manos: web apps for the lazy hacker
garuma
0
28
Other Decks in Technology
See All in Technology
Running JavaScript within Ruby
hmsk
3
330
ElixirがHW化され、最新CPU/GPU/NWを過去のものとする数万倍、高速+超省電力化されたWeb/動画配信/AIが動く日
piacerex
0
140
Devinで模索する AIファースト開発〜ゼロベースから始めるDevOpsの進化〜
potix2
PRO
7
3.4k
SnowflakeとDatabricks両方でRAGを構築してみた
kameitomohiro
1
350
Amazon S3 Tables + Amazon Athena / Apache Iceberg
okaru
0
270
Spring Bootで実装とインフラをこれでもかと分離するための試み
shintanimoto
7
820
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
MCPを活用した検索システムの作り方/How to implement search systems with MCP #catalks
quiver
12
6.5k
ブラウザのレガシー・独自機能を愛でる-Firefoxの脆弱性4選- / Browser Crash Club #1
masatokinugawa
1
470
AWS Control Towerを 数年運用してきての気づきとこれから/aws-controltower-ops-tips
tadayukinakamura
0
150
AI AgentOps LT大会(2025/04/16) Algomatic伊藤発表資料
kosukeito
0
140
SREからゼロイチプロダクト開発へ ー越境する打席の立ち方と期待への応え方ー / Product Engineering Night #8
itkq
2
740
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
67
11k
Scaling GitHub
holman
459
140k
Being A Developer After 40
akosma
91
590k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.6k
The Cost Of JavaScript in 2023
addyosmani
49
7.7k
Music & Morning Musume
bryan
47
6.5k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Code Reviewing Like a Champion
maltzj
522
40k
Visualization
eitanlees
146
16k
Designing Experiences People Love
moore
141
24k
Transcript
Xamuraï @jeremie_laval Jérémie Laval Mastering Time and Space Xamarin Evolve
2014
None
In a Magic Kingdom Somewhere in Florida Xamarin Evolve 2014
ANIMATION STUDIOS
None
None
None
“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
THE ILLUSION OF LIFE Frank Thomas & Ollie Johnston Disney
Animation
None
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
Wait a minute why are we talking about this? Xamarin
Evolve 2014
Mobile is also made alive Xamarin Evolve 2014
Instill life into content Xamarin Evolve 2014
Once upon a guideline Xamarin Evolve 2014 “Real objects are
more fun than buttons” “Strive for realism and credibility” “Bring life to the experience”
Touch Sensors Voice Physics Animations How do we do it?
Xamarin Evolve 2014
None
Animation are how we go from this: To this: Xamarin
Evolve 2014
Storyboards Object animators Animation blocks Animation Frameworks Xamarin Evolve 2014
.Animate( , , , , ); property from → to
values duration delay interpolator Common Ground
IEasingFunction ITimeInterpolator CAMediaTimingFunction Interpolator Types Xamarin Evolve 2014
double Interpolate( double t ); Eased value Normalized time [0-1]
Usual Definition Xamarin Evolve 2014
Deceleration Acceleration Input Output Xamarin Evolve 2014
Input Output Xamarin Evolve 2014 half-time
Input Output Xamarin Evolve 2014 half-time
1 - (1 - t)² t² Input Output Xamarin Evolve
2014
cb(0.42, 0, 1, 1) cb(0, 0, 0.58, 1) Input Output
Xamarin Evolve 2014
Interpolators can craft any type of movement Xamarin Evolve 2014
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
Xamarin Evolve 2014 github.com/garuma/xamagic Xamagic
Timing Squash & Stretch Anticipation Xamarin Evolve 2014
Anticipation art by cento lodigiani
Squash & Stretch art by cento lodigiani
Timing art by cento lodigiani keyframes keyframes
Motion Design
Jérémie Laval @jeremie_laval Xamarin Evolve 2014 THE END