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',  }});