AnimationParallelView

代码：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Animated,
  Image,
  Easing,
  TouchableHighlight,
} from 'react-native';

// const IMG_URI = 'https://s3.amazonaws.com/media-p.slid.es/uploads/alexanderfarennikov/images/1198519/reactjs.png';

export default class AnimationParallelView extends Component {

  constructor(props) {
      super(props);
      this.animatedValue1 = new Animated.Value(0);
      this.animatedValue2 = new Animated.Value(0);
      this.animatedValue3 = new Animated.Value(0);
  }

  componentDidMount () {
    this.animate();
  }

  animate () {
    // 将三个动画属性值重置为0
    this.animatedValue1.setValue(0);
    this.animatedValue2.setValue(0);
    this.animatedValue3.setValue(0);
    //声明一个创造动画的函数 该方法接受四个参数：value, duration, easing, delay(默认值是0)，返回一个新的动画。
    const createAnimation = function (value, duration, easing, delay = 0) {
      return Animated.timing(
        value,
        {
          toValue: 1,
          duration: duration,
          easing : easing,
          delay : delay,
        }
      );
    };
    //创建动画组
    Animated.parallel([
      createAnimation(this.animatedValue1, 2000, Easing.ease),
      createAnimation(this.animatedValue2, 1000, Easing.ease, 1000),
      createAnimation(this.animatedValue3, 1000, Easing.ease, 2000)        
    ]).start();
  }

  render () {
        // 设置插值 插值的输出范围是从0.5到2，我们会用这个值对文本按0.5到2的比例进行缩放
        const scaleText = this.animatedValue1.interpolate({
            inputRange: [0, 1],
            outputRange: [0.5, 2]
          });
          // 插值的输出范围是 0 degrees 到 720 degrees，即将元素旋转两周
          const spinText = this.animatedValue2.interpolate({
            inputRange: [0, 1],
            outputRange: ['0deg', '720deg']
          });
          // 插值的输出范围是 -100 到 400，该值会用于 View 的 margin 属性
          const introButton = this.animatedValue3.interpolate({
            inputRange: [0, 1],
            outputRange: [-100, 400]
          });
        return (
               <View style={[styles.container]}>
                 <Animated.View 
                   style={{ transform: [{scale: scaleText}] }}>
                   <Text>Welcome</Text>
                 </Animated.View>
                 <Animated.View
                   style={{ marginTop: 20, transform: [{rotate: spinText}] }}>
                   <Text
                     style={{fontSize: 20}}>
                     to the App!
                   </Text>
                 </Animated.View>
                 <Animated.View
                   style={{top: introButton, position: 'absolute'}}>
                   <TouchableHighlight
                     //animate 绑定组件Text 点击该组件时，重启该动画组。
                     onPress={this.animate.bind(this)}
                     style={styles.button}>
                     <Text
                       style={{color: 'red', fontSize: 20}}>
                       Click Here To Start
                     </Text>
                  </TouchableHighlight>
                 </Animated.View>
               </View>
        );
    }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 100,            
    justifyContent: 'center',
    alignItems: 'center',
  }
});