Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Mastering Time And Space
Jérémie Laval
October 10, 2014
Technology
1
120
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
220
Beautiful Android Apps
garuma
0
26
What's new in Android M
garuma
0
8
Developing for Android Wear, welcome to the wrist world
garuma
0
9
Material Design: From Concept to Implementation
garuma
0
100
Tips & Tricks to spice up your Android app
garuma
0
24
Introduction to Android Animations
garuma
0
24
Monomobile
garuma
0
35
Manos: web apps for the lazy hacker
garuma
0
13
Other Decks in Technology
See All in Technology
Power BI ”を” 可視化しよう!
hanaseleb
0
140
開発者のための GitHub Organization の安全な運用と 継続的なモニタリング
flatt_security
2
3.3k
【OCHaCafe#5】その Pod 突然落ちても大丈夫ですか?
k6s4i53rx
1
120
220428event_matsuda_part
caddi_eng
0
240
組織でPower Virtual Agentsを導入するために知っておきたいこと
miyakemito
0
1.6k
Adopting Kafka for the #1 job site in the world
ymyzk
1
280
1,000万人以上が利用する「家族アルバム みてね」のSRE組織は4年間でどのように作られてきたのか/SRE NEXT 2022
isaoshimizu
4
2.7k
失敗しない条件付きアクセス Season 3
sophiakunii
0
1.3k
2022年度ロボットフロンティア第1回
ryuichiueda
0
130
Microsoft 365の中でのPower BIの利用 / M365VM2022
ishiayaya
0
1.5k
如何使用 Argo Event& Workflow 快速建置自定義的工作流程 @ #CNTUG #47
line_developers_tw
PRO
0
5.6k
目と耳を持った自然言語処理 - スタートアップにおける価値創出のために
yag_ays
PRO
0
520
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
225
120k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Reflections from 52 weeks, 52 projects
jeffersonlam
337
17k
GraphQLの誤解/rethinking-graphql
sonatard
24
6.2k
Web Components: a chance to create the future
zenorocha
303
40k
Automating Front-end Workflow
addyosmani
1351
200k
Mobile First: as difficult as doing things right
swwweet
212
7.5k
Ruby is Unlike a Banana
tanoku
91
9.2k
In The Pink: A Labor of Love
frogandcode
130
21k
Teambox: Starting and Learning
jrom
121
7.6k
How GitHub (no longer) Works
holman
296
140k
Designing with Data
zakiwarfel
91
3.9k
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