Interactive Animations with React Native

Transcript

1. Interactive Animations with React Native Jorgie Rizaldy Susanto
2. Mobile Animation
3. What is the purpose? Visual FeedBack Current Status Connect Transitions User Attention
4. Background story - how react native works JavaScript Bridge Native A B JSON
5. Why RN Animated?? by React Native itself React vs Data Binding stable well documented updated
6. User Interface Before react
7. How does it work? Data Binding vs React each Binding MEMORY initialization cost - + Ultra Fast 0(1) Updates
8. How does it work? User Interface with react Render time matters Minimum View Changes Frame Performance 60 Fps
9. Import From {Animated} ‘react-native’; Animated.timing() A B Animated.decay() A B Animated.spring() A B
10. Animated.timing() Animated.decay() Animated.spring()
11. Import From {Animated} ‘react-native’; Animated.parallel() Animated.sequence() Animated.stagger() A b A b A b
12. Import From {Animated} ‘react-native’; Easing Animated.timing() Animated.decay() Animated.spring() #1 #2 #3 easings.net
13. Import From {Animated} ‘react-native’; Example :
14. Import From {Animated} ‘react-native’; Animated DECLARATIVE
15. Import From {Animated} ‘react-native’; #1 The value != number WHAT We NEED
16. Import From {Animated} ‘react-native’; #2 When to call Animation timeline initial value options init & callback #3
17. Import From {Animated} ‘react-native’; #4 interpolate() Animated Components transform
18. DEMO
19. Jorgie Rizaldy 081287436934 facebook.com/jorgieman jorgie.rizaldy @gmail.com @kodefox.com github.com/achillesJorgie