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
Interactive Animations with React Native
Search
Andi N. Dirgantara
April 19, 2017
Programming
0
140
Interactive Animations with React Native
Andi N. Dirgantara
April 19, 2017
Tweet
Share
More Decks by Andi N. Dirgantara
See All by Andi N. Dirgantara
Building Scalable and Flexible API by Leveraging GraphQL and BigTable
hellowin
0
75
How Traveloka Handle Data Pipeline for Big Things?
hellowin
4
610
Data Lake Implementation in Traveloka
hellowin
2
310
How Big Data Platform Handle Big Things
hellowin
1
130
How Big Data Works in Sale Stock
hellowin
4
490
Painless UI Testing with Jest
hellowin
1
130
Loopback Framework for Developing REST API with Node.js
hellowin
1
140
Facebook Developer Circle: Malang - Initial Meet Up
hellowin
0
110
Other Decks in Programming
See All in Programming
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.8k
色々なIaCツールを実際に触って比較してみる
iriikeita
0
330
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.2k
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
610
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
130
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
1k
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
1.7k
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
10
1.3k
Realtime API 入門
riofujimon
0
150
受け取る人から提供する人になるということ
little_rubyist
0
250
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
110
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
Featured
See All Featured
A Tale of Four Properties
chriscoyier
156
23k
Ruby is Unlike a Banana
tanoku
97
11k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
The Pragmatic Product Professional
lauravandoore
31
6.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Speed Design
sergeychernyshev
25
620
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Why Our Code Smells
bkeepers
PRO
334
57k
Transcript
Interactive Animations with React Native Jorgie Rizaldy Susanto
Mobile Animation
What is the purpose? Visual FeedBack Current Status Connect Transitions
User Attention
Background story - how react native works JavaScript Bridge Native
A B JSON
Why RN Animated?? by React Native itself React vs Data
Binding stable well documented updated
User Interface Before react
How does it work? Data Binding vs React each Binding
MEMORY initialization cost - + Ultra Fast 0(1) Updates
How does it work? User Interface with react Render time
matters Minimum View Changes Frame Performance 60 Fps
Import From {Animated} ‘react-native’; Animated.timing() A B Animated.decay() A B
Animated.spring() A B
Animated.timing() Animated.decay() Animated.spring()
Import From {Animated} ‘react-native’; Animated.parallel() Animated.sequence() Animated.stagger() A b A
b A b
Import From {Animated} ‘react-native’; Easing Animated.timing() Animated.decay() Animated.spring() #1 #2
#3 easings.net
Import From {Animated} ‘react-native’; Example :
Import From {Animated} ‘react-native’; Animated DECLARATIVE
Import From {Animated} ‘react-native’; #1 The value != number WHAT
We NEED
Import From {Animated} ‘react-native’; #2 When to call Animation timeline
initial value options init & callback #3
Import From {Animated} ‘react-native’; #4 interpolate() Animated Components transform
DEMO
Jorgie Rizaldy 081287436934 facebook.com/jorgieman jorgie.rizaldy @gmail.com @kodefox.com github.com/achillesJorgie