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
110
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
61
How Traveloka Handle Data Pipeline for Big Things?
hellowin
4
560
Data Lake Implementation in Traveloka
hellowin
2
290
How Big Data Platform Handle Big Things
hellowin
1
130
How Big Data Works in Sale Stock
hellowin
4
480
Painless UI Testing with Jest
hellowin
1
120
Loopback Framework for Developing REST API with Node.js
hellowin
1
130
Facebook Developer Circle: Malang - Initial Meet Up
hellowin
0
100
Other Decks in Programming
See All in Programming
Honoとhtmx
yusukebe
6
1.2k
WebComponentsで フレームワークを1ページに共存させる
webuilder240
0
150
AppDeveloperCon 2024 EU: Building polyglot developer experiences in 2024
salaboy
0
380
Dockerで始めるAWS Lambda開発
stutkhd0709
14
2.5k
オブジェクトしこう
okuramasafumi
2
130
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
5
1.1k
とにかくHTTP3をライトニングに話す / Anyway, I'll talk to Lightning about HTTP3.
seike460
PRO
0
120
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
170
孤独のCTOグルメという やや奇抜な企画をやった目的と効果
shoheimitani
3
1k
Swiftの型推論を学ぼう | Let's Learn About Type Inference in Swift
omochi
2
720
TDDと今まで
kanayannet
0
140
Enhancing Applications with Accessibility API
kishikawakatsumi
3
1k
Featured
See All Featured
The Mythical Team-Month
searls
214
42k
WebSockets: Embracing the real-time Web
robhawkes
59
6.9k
GitHub's CSS Performance
jonrohan
1023
450k
Designing on Purpose - Digital PM Summit 2013
jponch
109
6.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
A Philosophy of Restraint
colly
195
15k
How to train your dragon (web standard)
notwaldorf
71
5.1k
Six Lessons from altMBA
skipperchong
19
2.9k
Why Our Code Smells
bkeepers
PRO
330
56k
Side Projects
sachag
451
41k
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
644
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