使用 React Native 交错动画

可以简单的把 React Native 交错动画看的是并行动画和系列动画的组合。也就是说，使用 Animated.stagger 方法按照给定的延时间隔顺序、并行的执行动画。与 parallel 和 sequence 一样，stagger 也包含了一个动画数组，同时执行所有动画，但需要设置相等间隔时间的开始时间。与 parallel 和 sequence 不同的是，Animated.stagger 方法的第一个参数是交错时间，第二个参数是动画数组。

API

Animated.timing(
100,
  [
    animation1,
    animation2,
    animation3
  ]
}

代码实现

import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Animated
} from 'react-native'

export default class RNAnimations extends Component {
  constructor () {
    super()
    this.animatedValues = []
    for (let i = 0; i < 1000; i++) {
      this.animatedValues[i] = new Animated.Value(0)
    }
    this.animations = this.animatedValues.map(value => {
      return Animated.timing(
        value,
        {
          toValue: 1,
          duration: 100
        }
      )
    })
  }
  componentDidMount() {
    this.animate()
  }
  animate = () => {
    Animated.stagger(5, this.animations).start()
  }
  render() {
    return (
      <View style={styles.container}>
        {
          this.animatedValues.map((value, index) => (
            <Animated.View key={index} style={[{opacity: value}, styles.box]} />
          ))
        }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  box: {
    width: 15,
    height: 15,
    margin: .5,
    backgroundColor: '#006699'
  }
})

最终效果如图所示：