Animations


Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface. React Native provides two complementary animation systems: Animated for granular and interactive control of specific values, and LayoutAnimation for animated global layout transactions. Animated API The Animated API is designed to make it very easy to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple start/stop methods to control time-based animation execution. Animated exports four animatable component types: View, Text, Image, and ScrollView, but you can also create your own using
Animated.createAnimatedComponent(). import React from 'react'; import { Animated, Text, View } from 'react-native'; class FadeInView extends React.Component { state = { fadeAnim: new Animated.Value(0), // Initial value for opacity: 0 } componentDidMount() { Animated.timing( // Animate over time this.state.fadeAnim, // The animated value to drive { toValue: 1, // Animate to opacity: 1 (opaque) duration: 10000, // Make it take a while } ).start(); // Starts the animation } render() { let { fadeAnim } = this.state; return ( <Animated.View // Special animatable View style={{ ...this.props.style, opacity: fadeAnim, // Bind opacity to animated value }} > {this.props.children} </Animated.View> ); } } // You can use your `FadeInView` in place of a `View` in your components: export default class App extends React.Component { render() { return ( <View style={{flex: 1,alignItems: 'center',justifyContent: 'center'}}> <FadeInView style={{width: 250, height: 50, backgroundColor: 'blue'}}> <Text style={{textAlign: 'center', margin: 10}}>Fading in</Text> </FadeInView> </View> ) } } Try this code here..



Let's break down what's happening here. In the FadeInView constructor, a new Animated.Value called fadeAnim is initialized as part of state. The opacity property on the View is mapped to this animated value. Behind the scenes, the numeric value is extracted and used to set opacity. When the component mounts, the opacity is set to 0. Then, an easing animation is started on the fadeAnim animated value, which will update all of its dependent mappings (in this case, just the opacity) on each frame as the value animates to the final value of 1. This is done in an optimized way that is faster than calling setState and re-rendering. Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.
There are many Method for animations linke

  • animated.timing(this.state.key, { toValue: 0.2, duration:1000, easing:Easing.back(); })
  • friction to stretch or zoom animations animated.spring(this.state.key, { toValue: 0.2, friction:2, })
  • // sequence wise animated.sequences( animated.timing(this.state.key, { toValue: 0.2, duration:1000, easing:Easing.back(); }), animated.spring(this.state.key, { toValue: 0.2, friction:2, }) )
  • //parallel animation animated.parallel( animated.timing(this.state.key, { toValue: 0.2, duration:1000, easing:Easing.back(); }), animated.spring(this.state.key, { toValue: 0.2, friction:2, }) )
CONTENTS