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);效果图: