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
410
Beautiful Android Apps
garuma
0
62
What's new in Android M
garuma
0
63
Developing for Android Wear, welcome to the wrist world
garuma
0
70
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
140
Monomobile
garuma
0
97
Manos: web apps for the lazy hacker
garuma
0
39
Other Decks in Technology
See All in Technology
SCONE - 動画配信の帯域を最適化する新プロトコル
kazuho
1
260
Click A, Buy B: Rethinking Conversion Attribution in ECommerce Recommendations
lycorptech_jp
PRO
0
110
「魔法少女まどか☆マギカ Magia Exedra」の多様なバトルの開発を柔軟かつ効率的に実現するためのPure C#とUnityの分離について
gree_tech
PRO
0
130
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
670
OCIjp_Oracle AI World_Recap
shinpy
1
120
それでも私が品質保証プロセスを作り続ける理由 #テストラジオ / Why I still continue to create QA process
pineapplecandy
0
150
FinOps について (ちょっと) 本気出して考えてみた
skmkzyk
0
180
AI Agent Dojo #2 watsonx Orchestrateフローの作成
oniak3ibm
PRO
0
140
Azureコストと向き合った、4年半のリアル / Four and a half years of dealing with Azure costs
aeonpeople
1
230
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
oikon48
10
5.2k
Digitization部 紹介資料
sansan33
PRO
1
5.6k
あなたの知らない Linuxカーネル脆弱性の世界
recruitengineers
PRO
3
120
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
66k
Producing Creativity
orderedlist
PRO
347
40k
Site-Speed That Sticks
csswizardry
13
910
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Gamification - CAS2011
davidbonilla
81
5.5k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
920
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
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