1 of 16

React Native Animations

import { Animated } from “react-native”

2 of 16

CSS Animations

3 of 16

Step 1

Define initial animatable property

.slideIn {� transform: translate(0px, 0px);�

transition-property: transform;

transition-duration: 2s;� transition-timing-function:

ease-in;

transition-delay: 1s;�}

CSS

4 of 16

Step 2

Set Animatable Style Property on Component

<html> � <body>� <div class='slide-in-box'>

My Sliding Box

</div>� </body>�</html>

html

5 of 16

Step 3

Start the animation

window.onload(() => { � const box = document� .getElementsByClassName(

'slideIn').item(0);

​

box.style.transform =

'translate(200px, 0px)';

});

es6

6 of 16

React Native Animated

7 of 16

Step 1

Define initial animatable property

const { Component } = require('react'); �const { � Animated,� Easing�} = require('react-native');��class SlidingBox extends Component { � constructor(props) {� super(props);

this.slideIn = Animated.timing(

this.state.slide,

{ toValue: { x: 200, y: 0 },

duration: 2000,� delay: 1000,� easing: Easing.in(Easing.ease) }

)

� this.state = {� slide: new Animated.ValueXY({ x: 0, y: 0 });� }� }�}

JSX

  1. Import Animated

library

  • Create an animation
  • Create an animating state variable

8 of 16

Step 2

Set Animatable Style Property on Component

class SlidingBox extends Component { � …

� render() {� const slideStyle =

this.state.slide.getTranslateTransform();�

return (� <Animated.View style={slideStyle}>� <Text>My Sliding Box</Text>� </Animated.View>�);

}�}

JSX

getTranslateTransform():

returns the tweening state variable

​

Animated.View is one of 3 default animatable components

Others are Animated.Text, Animated.Image

​

Any component can be an animatable component with:

​

const AnimatedScrollView = Animated

.createAnimatedComponent(ScrollView)

9 of 16

Step 3

Start the animation

class SlidingBox extends Component { � …

� componentDidMount() {� this.slideIn.start();

}

}�

JSX

10 of 16

Animation functions

11 of 16

Timing Functions

Timing

Spring

Decay

Animated.timing(

this.state.slide,

{

toValue: number,

duration: number,� delay: number,� easing: Easing

}

)

Animated.spring(

this.state.slide,

{

toValue: number� overshootClamping: bool� restDisplacementThreshold: number� restSpeedThreshold: number� velocity: number� bounciness: number� speed: number� tension: number� friction: number

}

)

Animated.decay(

this.state.slide,

{

toValue: number� Deceleration: number

}

)

JSX

12 of 16

Composing Functions

Animated.sequence([� Animated.timing(this.animVal, {� toValue: 100,� duration: 200� }),� Animated.timing(this.animVal, {� toValue: 0,� duration: 200� })�]).start()

[ Sequence ]

Parallel

Stagger

Delay

JSX

13 of 16

Composing Functions

Animated.parallel([� Animated.timing(this.animVal, { � toValue: 100,� duration: 200� }),� Animated.timing(this.animVal, {� toValue: 0,� duration: 200� })�]).start()

Sequence

[ Parallel ]

Stagger

Delay

JSX

14 of 16

Composing Functions

Animated.stagger(100, [� Animated.timing(this.animVal, {� toValue: 100,� duration: 200� }),� Animated.timing(this.animVal, {� toValue: 0,� duration: 200� })�]).start()

Sequence

Parallel

[ Stagger ]

Delay

JSX

100ms

100ms

15 of 16

Composing Functions

Animated.sequence([� Animated.delay(500),� Animated.timing(this.animVal, {� toValue: 100,� duration: 200� })�]).start()

Sequence

Parallel

Stagger

[ Delay ]

JSX

500ms

16 of 16

References

https://github.com/CapitanRedBeard/react-native-animation-showcase

​

​

Git: CapitanRedBeard

emmett_harper@intuit.com

https://facebook.github.io/react-native/docs/animations.html

http://browniefed.com/react-native-animation-book/

http://browniefed.com/blog/react-native-animated-api-basic-example/

http://blog.huynh.io/2015/08/06/react-native-animations/

https://speakerdeck.com/vjeux/react-rally-animated-react-performance-toolbox

Best api documentation