//研究Animated的順序執(zhí)行锋爪，延時執(zhí)行鬼譬，同時執(zhí)行的效果動畫
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 = {
            //創(chuàng)建動畫的數(shù)組，并map遍歷賦值
            anim: [1,2,3].map(() => new Animated.Value(0)),
        }
    }

    animation1 = () => {
        let timing = Animated.timing;
        //stagger 延時執(zhí)行數(shù)組中的動畫
        let stagger = Animated.stagger;
        //parallel 同時執(zhí)行數(shù)組中的動畫
        let parallel = Animated.parallel;
        //sequence 順序執(zhí)行數(shù)組中的動畫
        Animated.sequence([
        //依次延時200毫秒述吸，執(zhí)行數(shù)組中的動畫
            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> 點我執(zhí)行 動畫 </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