React Native ❤ 60FPS Improving React Native animations - ReactEurope 2016

Slide 1

Slide 1 text

React Native ❤ 60FPS Improving React Native animations Krzysztof Magiera (@kzzzf) [email protected]

Slide 2

Slide 2 text

WHY DO WE ANIMATE? Transition, Focus, Fun

Slide 3

Slide 3 text

NATIVE COMPONENTS ANIMATIONS

Slide 4

Slide 4 text

NATIVE COMPONENTS ANIMATIONS

Slide 5

Slide 5 text

NATIVE COMPONENTS ANIMATIONS

Slide 6

Slide 6 text

NATIVE COMPONENTS ANIMATIONS

Slide 7

Slide 7 text

NATIVE COMPONENTS ANIMATIONS PROS CONS • maximum performance • platform-speciﬁc behaviour “by default” • very little work • very limited set of components • often impossible to customise

Slide 8

Slide 8 text

LayoutAnimation.spring(); this.setState({...}); LAYOUT ANIMATIONS

Slide 9

Slide 9 text

LAYOUT ANIMATIONS JS Thread LayoutAnimation.spring(); UIManager.createView(...); UIManager.addChildren(...); Native Thread UI Thread applyUpdates(); runLayout(); ANIMATED_BLOCK_START; updateX(from: 180, to: 250); ANIMATED_BLOCK_END;

Slide 10

Slide 10 text

LAYOUT ANIMATIONS PROS CONS • native performance • very easy API • works for layout properties only • non interruptible

Slide 11

Slide 11 text

ANIMATED.JS “focuses on declarative relationships between input and outputs”

Slide 12

Slide 12 text

ANIMATED.JS (basics) var someValue = new Animated.Value(0); // can be kept in the component state return ( Hello! ); Animated.spring( someValue, { toValue: 1, friction: 0.5, } ).start();

Slide 13

Slide 13 text

ANIMATED.JS (basics) var anotherValue = new Animated.Value(-200); var product = Animated.multiply(interpolatedValue, anotherValue); var interpolatedValue = someValue.interpolate({ inputRange: [0, 100], outputRange: [0, 1], });

Slide 14

Slide 14 text

ANIMATED.JS (implementation)

Slide 15

Slide 15 text

someValue: 0 anotherValue: -200 interpoleted style ANIMATED.JS (implementation)

Slide 16

Slide 16 text

someValue: 0 anotherValue: -200 in requestAnimationFrame() ANIMATED.JS (implementation)

Slide 17

Slide 17 text

someValue: 0 anotherValue: -200 in ANIMATED.JS (implementation) event handleOnScroll()

Slide 18

Slide 18 text

ANIMATED.JS PROS CONS • very flexible • allows for defining gesture interaction • best performance when not animating layout properties • difficult to express layout animations – complementary API is needed • gesture reaction latency • overloading JS thread

Slide 19

Slide 19 text

ASYNC FATE Thread Thread UI I’m free and can do whatever I want but I won’t be blocking the UI Render some stuff with React and then send render commands to the UI Thread RENDER, RENDERRR..

Slide 20

Slide 20 text

ASYNC FATE Thread Thread UI Hey! Touch event! Handle touch – maybe render sth RENDER, RENDERRR..

Slide 21

Slide 21 text

ASYNC FATE Thread Thread UI Handle touch – maybe render sth RENDER, RENDERRR.. f1 f2 f3 input compose sorry man, have to compose the frame … input compose input VSYNC

Slide 22

Slide 22 text

ANIMATED.JS Your frame just left – next one is in 16ms

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

ANIMATED.JS InteractionManager https://facebook.github.io/react-native/docs/interactionmanager.html

Slide 25

Slide 25 text

ANIMATED.JS “focuses on declarative relationships between input and outputs”

Slide 26

Slide 26 text

ANIMATED.JS declarative declarative

Slide 27

Slide 27 text

OFFLOADING ANIMATIONS

Slide 28

Slide 28 text

OFFLOADING ANIMATIONS generateAnimatedGraph() runAnimationLoopOnUIThread()

Slide 29

Slide 29 text

Animated.spring( someValue, { toValue: 1, friction: 0.5, useNativeDriver: true, } ).start(); OFFLOADING ANIMATIONS LIMITATIONS • implemented on Android only • only a subset of Animated.js has been implemented • animating layout properties is not supported • using value update handlers will still require JS roundtrip • single value cannot be used for animating both using native driver and using JS driver https://github.com/facebook/react-native/pull/7884

Slide 30

Slide 30 text

Thank you! Krzysztof Magiera [email protected] @kzzzf