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
210
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
390
Beautiful Android Apps
garuma
0
53
What's new in Android M
garuma
0
53
Developing for Android Wear, welcome to the wrist world
garuma
0
66
Material Design: From Concept to Implementation
garuma
0
160
Tips & Tricks to spice up your Android app
garuma
0
110
Introduction to Android Animations
garuma
0
120
Monomobile
garuma
0
88
Manos: web apps for the lazy hacker
garuma
0
35
Other Decks in Technology
See All in Technology
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
140
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.2k
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
160
ゼロからはじめる採用広報
yutadayo
3
1k
cdk initで生成されるあのファイル達は何なのか/cdk-init-generated-files
tomoki10
0
180
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
2
770
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
180
事例で学ぶ!B2B SaaSにおけるSREの実践例/SRE for B2B SaaS: A Real-World Case Study
bitkey
1
170
AWS認定を取る中で感じたこと
siromi
1
210
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
180
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
260
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
A Modern Web Designer's Workflow
chriscoyier
695
190k
How STYLIGHT went responsive
nonsquared
100
5.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Making Projects Easy
brettharned
116
6.3k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
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