AnimationStaggerView

AnimationStaggerView.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Animated

} from 'react-native';

const arr = [];

for (var i = 0; i < 500; i++) {
  arr.push(i);
}

export default class AnimationStaggerView extends Component {
  constructor () {
    super();
    // 使用迭代器创建属性数组
    this.animatedValue = [];
    arr.forEach((value) => {
      this.animatedValue[value] = new Animated.Value(0);
    });
  }

  componentDidMount () {
    this.animate();
  }

  animate () {
     // 使用迭代器创建动画数组
    const animations = arr.map((item) => {
      return Animated.timing(
        this.animatedValue[item],
        {
          toValue: 1,
          duration: 2000,
        }
      );
    });
    Animated.stagger(10, animations).start();
  }

  render () {
    const animations = arr.map((a, i) => {
      console.log("a--------->"+ a);  
      console.log("i---------->"+ i);  
      //在这里a，i都是一样的 下标                                      
      return <Animated.View 
                 key={i} 
                 style={{opacity: this.animatedValue[i],  
                         height: 20, width: 20,
                        backgroundColor: 'red', 
                        marginLeft: 3, 
                        marginTop: 3}} />
    });

    return (
      <View style={styles.container}>
        {animations}
        <View></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap'
  }
});

示例：

import React from 'react';
import {
   AppRegistry,
   View,
   Text,
   StyleSheet,
   Animated,
} from 'react-native';
import AnimationStaggerView from './AnimationStaggerView';

class MyFirstProject extends React.Component{

    render() {
        return (
             <View>
                 <AnimationStaggerView></AnimationStaggerView>
             </View>
        );
    }
}
AppRegistry.registerComponent('MyFirstProject', ()=> MyFirstProject);

效果图：