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
220
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
400
Beautiful Android Apps
garuma
0
57
What's new in Android M
garuma
0
61
Developing for Android Wear, welcome to the wrist world
garuma
0
68
Material Design: From Concept to Implementation
garuma
0
170
Tips & Tricks to spice up your Android app
garuma
0
120
Introduction to Android Animations
garuma
0
130
Monomobile
garuma
0
95
Manos: web apps for the lazy hacker
garuma
0
38
Other Decks in Technology
See All in Technology
slog.Handlerのよくある実装ミス
sakiengineer
4
170
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
170
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
250
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
450
はじめてのOSS開発からみえたGo言語の強み
shibukazu
1
180
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
180
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
170
Agile PBL at New Grads Trainings
kawaguti
PRO
1
430
2025年になってもまだMySQLが好き
yoku0825
8
4.8k
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
150
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
290
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Producing Creativity
orderedlist
PRO
347
40k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Designing for Performance
lara
610
69k
Music & Morning Musume
bryan
46
6.8k
Done Done
chrislema
185
16k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
BBQ
matthewcrist
89
9.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
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