React-Native 学习Animated -2

//研究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(
                
                    我是第{i}个View
                
            )
        });

        return(
            
                
                     点我执行 动画 
                
                {views}
            
        )
    }
}

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

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

Untitled2.gif