React Native Animations

React Native Animations import { Animated } from “react-native”

CSS Animations

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

Step 2 Set Animatable Style Property on Component <html> <body>
<div class='slide-in-box'> My Sliding Box </div> </body> </html> html

Step 3 Start the animation window.onload(() => { const box
= document .getElementsByClassName( 'slideIn').item(0); box.style.transform = 'translate(200px, 0px)'; }); es6

React Native Animated

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 A. Import Animated library B. Create an animation C. Create an animating state variable

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)

Step 3 Start the animation class SlidingBox extends Component {
… componentDidMount() { this.slideIn.start(); } } JSX

Animation functions

Timing Functions Timing Animated.timing( this.state.slide, { toValue: number, duration: number,
delay: number, easing: Easing } ) Spring Decay 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

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

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

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

Composing Functions Animated.sequence([ Animated.delay(500), Animated.timing(this.animVal, { toValue: 100, duration: 200
}) ]).start() Sequence Parallel Stagger [ Delay ] JSX 500ms

References https://github.com/CapitanRedBeard/react-native-animation-showcase 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-toolbo x Best api
documentation Git: CapitanRedBeard [email protected]

React Native Animations

React Native Animations

Emmett Harper

Other Decks in Education

Featured

Transcript