If you want to add animations to a React Native app, the first thing to consider is Animated. By defining the input and output values of the animation state, the start/stop method can be executed, which is very user-friendly to use.

The Animated components are:

If an interface element is animated, it should use the following animation components:

  • Animated.View
  • Animated.Text
  • Animated.Image
  • Animated.ScrollView
  • Animated.FlatList
  • Animated.SectionList

Animation type:

Animated can create three types of animation and can be called directly to create an animation object, such as Animated. Timing (…) , the animation object can be started by calling start().

  • Timing Accelerate to full speed and then slow to a stop (most used)
  • Spring executes an animation that exceeds the final value and then bounces back, suitable for elastic dynamic effects
  • Decay started at an initial rate and then slowed down until it stopped

Such as:

Spring (this.state.value,{... Animation configuration}).start();Copy the code

Animated value:

Variables in the animation execution process are not ordinary variables, can only be animation values, there are two types:

  • Animated.Value() represents a single Value
  • Animated.ValueXY() represents vector (vector) values (can be used to change x and y coordinates).

Example:

This. State = {dynamicHeight: new Animated Value (0) / / initialization} this. State. DynamicHeight. SetValue (10); // Reset the animation valueCopy the code

Calculate animation value

In some cases, the animation value used can not be directly set, or there is a certain relationship between multiple animation values, which is more convenient to use after conversion, that is, calculation is needed before use, so some common calculation methods are needed.

Such as: A length to width ratio of 3: In order to realize the enlarged animation of the picture of 2, in order to keep the aspect ratio unchanged in the process of change, a common factor can be used at this time, width = common factor times 2, length = common factor times 3. The animation value changed in state is the common factor. The actual animation values used are those obtained by multiplying Animated.multiply().

// factor is a variable in state, Const realAnimatedWidth = Animated. Multiply (this.state.factor,new Animated.Value(2));Copy the code

Available calculation methods:

  • Animated. The add ()
  • Animated. Subtract ()
  • Animated. Multiply ()
  • In addition to the Animated. Divide ()
  • Animated. Modulo ()

Combination type

Combination animations are used when multiple animations need to happen in a certain way (multiple animation values change), and Animated provides several ways to combine animations in certain ways:

  • Animated. Delay (time) Executes animation after the given delay
  • Animated.parallel(animations, config?) Execute multiple animations simultaneously
  • Animated. Sequence (animations) Execute sequentially. One animation ends and the next one begins
  • Animated. Stagger (time, animations) Start multiple animations in a given delay order, possibly overlapping in parallel.
  • loop(animation, config?) Loop a specified animation indefinitely

For example:

Parallel ([Animated. Timing (...), Animated. Spring (...)] ).start()Copy the code

The interpolation

To obtain the range of one animation value based on the range of another animation value, interpolation is required. Interpolation functions interpolate can map an input range to an output range, usually using linear interpolation, but easing functions can also be specified [see Introduction to Easing].

For variables with string values, such as rotate, from ‘0deg’ to ‘180deg’, interpolation should also be used to get the range.

  • AnimatdValue.interpolate(config)

Such as:

// fadeAnim -> [0,1] translateY -> [150,0] style={{opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity this.state.fadeAnim, // Binds directly transform: [{ translateY: this.state.fadeAnim.interpolate({ inputRange: [0, 1], outputRange: / / 0 150, 0, 150, 0.5:75, 1:0}),}].}}Copy the code

A complete simple animation can be achieved in the following steps:

  1. Define the animation value variable and initialize it

  2. Define animation configuration and execution methods

  3. Binds animated values to components that can be used to change properties or styles

  4. An event or action that triggers the execution of an animation

Each of these steps will be easier to understand if you look at the examples below.

[Animation 1 – Animation Value Control Height] Click to expand the animation of the view, the effect is as follows:

Do this by setting the height of Animated.View to the Animated value. The above three steps are marked in the code

export default class AnimatedView extends PureComponent { constructor(props) { super(props); this.state = { dynamicHeight: new Animated.Value(0), //1 - define dynamicHeight animation variable}} startViewAnimation = () => {//2 - configure animation and define execution method let targetHeight = 80; If (this. State. DynamicHeight. _value = = = 80) {/ / according to height determine whether have begun targetHeight = 0; / / has started, you need to pack up the View, high return to the initial value 0} Animated. The spring (/ / define the elastic animation this. State. DynamicHeight, / / change the animation variable {toValue: Duration: 300, // animation duration}).start(); } render() { return ( <View style={{flex: 1}}> <View style={{width: 200, position: 'absolute', top: 30}}> <View> <TouchableOpacity onPress={this.startViewAnimation} // 4 - Click event to trigger animation execution style={styles.button}> <Text> click to expand </Text> </TouchableOpacity> </View> <Animated.View style={{backgroundColor: '#eee', justifyContent: 'space-around', height: This.state.dynamicheight}} //3 - Set the height to Animated value, that is, Animated value change style (height) > </Animated.View> </View> </View>); }}Copy the code

[Animation 2 – Animation value Interpolation conversion] Click on the pulsing heart:

The Animated imageSize values are mapped from 0 to 1 to the corresponding actual Image size and then set to the width and height style of Animated.Image.

export default class HeartView extends PureComponent { constructor(props) { super(props); This. state = {imageSize: new Animated.Value(0), // Animated = 0, Animated = 1. }} startImageAnimation = () => {// Set the initial value to 0 before animation starts, Otherwise this. After the first execution state. ImageSize Animated value is always 1, there will be no effect. This state, imageSize. SetValue (0) Animated. Spring (this. State. ImageSize, { toValue: 1, duration: 2000, } ).start(); } render() {// Render from 0 to 1; Mapped to the actual picture size / / and then the actual picture size is set to Animated. The Image of style const imageSize = this. State. ImageSize. Interpolate ({inputRange: [0, 0.5, 1], outputRange: [30, 40, 30]}); return ( <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}> <TouchableOpacity onPress={this.startImageAnimation} > <Animated.Image source={ICON_HEART} style={{width: ImageSize, height: imageSize, // apply to imageSize, // apply to imageSize, // apply to imageSize, // apply to imageSize; }}Copy the code

These are the basic uses of Animated, but the sections on setNativeProps and LayoutAnimation conclude separately.