如何在同一子组件中处理React Native animation.timing

Question

父组件：

routes.forEach((data, index) => {
  content.push(<Item key={index} offset={688} route={route} />)
})

Item 零件：

scrollAnimate (toValue) {
  const { offset } = this.props;

  Animated.timing(
    this.state.xTranslate,
    {
      toValue,
      duration: 20000,
      easing: Easing.linear,
      useNativeDriver: true
    }
  ).start((e) => {
    if (e.finished) {
      const newState = {xTranslate: new Animated.Value(offset)}
      this.setState(newState, () => { this.scrollAnimate(toValue) })
    }
  });
}

我希望每个ItemComponent循环都设置动画，但是事实是所有ItemComponents动画结束，然后所有ItemComponent一起开始动画。我该如何解决？

Answer 1

Well it looks like all your animations start at the same time and have the same duration so obviously they will end at the same time.

如果要防止它们同步，可以给它们提供不同的持续时间或添加不同的延迟：

Animated.timing(
  this.state.xTranslate,
  {
    toValue,
    duration: 20000,
    easing: Easing.linear,
    useNativeDriver: true,
    delay: Math.random() * 1000, // Or pass it as this.props.delay
  }
)