使用 React Native 序列动画

序列（sequence）动画是一系列依次出现的动画，每个动画在开始前需等待上一个动画完成，sequence 可以用来创建动画，与 parallel 类似，sequence 也包含一个动画数组：

API

Animated.sequence([
  animation1,
  animation2,
  animation3
]).start()

代码实现

下面将创建一个序列，将字符大家好，投放到屏幕中，投放间隔为 500 毫秒。代码清单如下：

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Animated
} from 'react-native';

export default class RNAnimations extends Component {
  componentDidMount() {
    this.animate();
  }
  first = new Animated.Value(-30);
  second = new Animated.Value(-30);
  third = new Animated.Value(-30);
  animate = () => {
    const createAnimation = (value) => {
      return Animated.timing(
        value, {
        toValue: 290,
        duration: 500
      })
    }
    Animated.sequence([
      createAnimation(this.first),
      createAnimation(this.second),
      createAnimation(this.third)
    ]).start()
  }
  render() {
    return (
      <View style={styles.container}>
        <Animated.Text
          style={[styles.text,
          { marginTop: this.first }]}
        >
          大
        </Animated.Text>
        <Animated.Text
          style={[styles.text,
          { marginTop: this.second }]}
        >
          家
        </Animated.Text>
        <Animated.Text
          style={[styles.text,
          { marginTop: this.third }]}>
          好
        </Animated.Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    flexDirection: 'row',
  },
  text: {
    marginHorizontal: 20,
    fontSize: 26
  }
});

该示例使用 -30 为起始动画值，因为该数值是文本元素的 marginTop 值。文本从屏幕顶部拉出，并在动画开始之前隐藏在屏幕顶部函数，createAnimation 函数救灾接收了一个动画值作为参数。

最终效果如下图所示：