Question

我正在我的本地应用程序上设置一个简单的布局，上面列出了可以单击并打开预订流程的产品列表。单击产品时，整个应用程序将向左滑动，而产品页面则从右向左滑动。

当我从产品页面单击时，我会将应用程序和产品向右滑动。但是因为产品页面是预订流程的一部分，所以我想通过将状态设置为false来卸载BookingFlow组件。

问题是动画的回调存在延迟，因此卸载BookingFlow组件需要400毫秒。

我使用Animated.parallel中的回调来这样做：

closeProduct () {
  Animated.parallel([
    Animated.spring(this.props.translateXApp, {
      toValue: 0,
      duration: 140,
      bounciness: 0,
      speed: 14,
      easing: Easing.ease,
      useNativeDriver: true
    }),
    Animated.spring(this.translateXProduct, {
      toValue: width,
      duration: 140,
      bounciness: 0,
      speed: 14,
      easing: Easing.ease,
      useNativeDriver: true
    })
  ]).start(() => {
    this.props.closeBookingFlow()
  })
}

在我的app.js上，这是我的代码：

    <Animated.View style={[styles.translateXView,{transform: [{translateX: this.translateXApp},{scale:this.scallApp}]}]}>
      <Application  
        openCategory={this.openCategory.bind(this)} 
        openProduct={this.openProduct.bind(this)}
      />
    </Animated.View>

    {
    this.state.showBookingFlow == true?
    <BookingFlow 
      closeBookingFlow = {this.closeBookingFlow.bind(this)}
      onRef={ref => (this.bookingFlowRef = ref)}
      translateXApp = {this.translateXApp}
    />
    :null
    }

为了避免这个问题，我找到了一个技巧，但这不是很正确。我在等待400毫秒的动画之外使用超时。

  setTimeout(function(){
    that.props.closeBookingFlow()
  }, 400);

有没有办法避免动画回调中的延迟？谢谢大家。

Answer 1

我发现我需要将这两个值添加到我的springs动画中： restSpeedThreshold：100，restDisplacementThreshold：40

React-Native Animated.spring回调被延迟

1 个答案: