//研究Animated的顺序执行，延时执行，同时执行的效果动画
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Animated,
    View,
    Text,
    TouchableHighlight
} from 'react-native';

class RnAnimatedView extends Component {
    constructor(poros){
        super(poros);
        this.state = {
            //创建动画的数组，并map遍历赋值
            anim: [1,2,3].map(() => new Animated.Value(0)),
        }
    }

    animation1 = () => {
        let timing = Animated.timing;
        //stagger 延时执行数组中的动画
        let stagger = Animated.stagger;
        //parallel 同时执行数组中的动画
        let parallel = Animated.parallel;
        //sequence 顺序执行数组中的动画
        Animated.sequence([
        //依次延时200毫秒，执行数组中的动画
            stagger(200, this.state.anim.map(left => {
                return timing(left, {
                    toValue: 1,
                    duration: 2000,
                })
            })),
            // Animated.delay(400),
            parallel(this.state.anim.map(left => {
                return timing(left, {
                    toValue: 0,
                    duration: 2000,
                })
            })),
        ]).start();
    };

    render() {
        let views = this.state.anim.map(function (value, i) {
            console.log('sssss', value,i);
            return(
                <Animated.View key={i} style={[test4Style.test4AnimationView, i === 0 ? {transform: [
                    {rotateX: value.interpolate({
                        inputRange: [0, 1],
                        outputRange: ['0deg', '360deg'],
                    })}
                ]} : i === 1 ? {transform: [
                    {rotateY: value.interpolate({
                        inputRange: [0, 1],
                        outputRange: ['0deg', '360deg'],
                    })}
                ]} : {transform: [
                    {rotateZ: value.interpolate({
                        inputRange: [0, 1],
                        outputRange: ['0deg', '360deg'],
                    })}
                ]},
                ]}>
                    <Text>我是第{i}个View</Text>
                </Animated.View>
            )
        });

        return(
            <View style={test4Style.test4View}>
                <TouchableHighlight onPress={this.animation1}>
                    <Text> 点我执行 动画 </Text>
                </TouchableHighlight>
                {views}
            </View>
        )
    }
}

const test4Style = StyleSheet.create({
    test4View: {
        flex: 1,
        backgroundColor: '#f1d433',
        alignItems: 'center',
        justifyContent: 'center',
    },
    test4AnimationView: {
        backgroundColor: '#f35d22',
        marginTop: 20,
    }
});

AppRegistry.registerComponent('RnAnimatedView', () => RnAnimatedView);

Untitled2.gif