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