Interactive Animations with React Native

Slide 1

Slide 1 text

Interactive Animations with React Native Jorgie Rizaldy Susanto

Slide 2

Slide 2 text

Mobile Animation

Slide 3

Slide 3 text

What is the purpose? Visual FeedBack Current Status Connect Transitions User Attention

Slide 4

Slide 4 text

Background story - how react native works JavaScript Bridge Native A B JSON

Slide 5

Slide 5 text

Why RN Animated?? by React Native itself React vs Data Binding stable well documented updated

Slide 6

Slide 6 text

User Interface Before react

Slide 7

Slide 7 text

How does it work? Data Binding vs React each Binding MEMORY initialization cost - + Ultra Fast 0(1) Updates

Slide 8

Slide 8 text

How does it work? User Interface with react Render time matters Minimum View Changes Frame Performance 60 Fps

Slide 9

Slide 9 text

Import From {Animated} ‘react-native’; Animated.timing() A B Animated.decay() A B Animated.spring() A B

Slide 10

Slide 10 text

Animated.timing() Animated.decay() Animated.spring()

Slide 11

Slide 11 text

Import From {Animated} ‘react-native’; Animated.parallel() Animated.sequence() Animated.stagger() A b A b A b

Slide 12

Slide 12 text

Import From {Animated} ‘react-native’; Easing Animated.timing() Animated.decay() Animated.spring() #1 #2 #3 easings.net

Slide 13

Slide 13 text

Import From {Animated} ‘react-native’; Example :

Slide 14

Slide 14 text

Import From {Animated} ‘react-native’; Animated DECLARATIVE

Slide 15

Slide 15 text

Import From {Animated} ‘react-native’; #1 The value != number WHAT We NEED

Slide 16

Slide 16 text

Import From {Animated} ‘react-native’; #2 When to call Animation timeline initial value options init & callback #3

Slide 17

Slide 17 text

Import From {Animated} ‘react-native’; #4 interpolate() Animated Components transform

Slide 18

Slide 18 text

DEMO

Slide 19

Slide 19 text

Jorgie Rizaldy 081287436934 facebook.com/jorgieman jorgie.rizaldy @gmail.com @kodefox.com github.com/achillesJorgie