reactjs - react native 动画动画工作一次

Question

我正在使用 reanimated 在模态内创建自定义警报，它工作正常，但在该模态可见且内容已更新但动画将无法运行后，动画将仅在开始时运行一次，

这是我的代码

componentDidUpdate() {
    // stopClock(clock);
    if (this.state.visible) {
      block([
        timing(this.val, {
          toValue: 1,
          duration: 100,
          easing: Easing.inOut(Easing.ease),
        }).start(),
        spring(this.scale, {
          toValue: 1,
          damping: 12,
          mass: 0.6,
          stiffness: 150.6,
          overshootClamping: false,
          restSpeedThreshold: 0.1001,
          restDisplacementThreshold: 0.001,
        }).start(),
      ]);
    } else {
      block([
        timing(this.val, {
          toValue: 0,
          duration: 0,
          easing: Easing.inOut(Easing.ease),
        }).start(),
        spring(this.scale, {
          toValue: 0,
          damping: 12,
          mass: 0.6,
          stiffness: 150.6,
          overshootClamping: false,
          restSpeedThreshold: 0.001,
          restDisplacementThreshold: 0.001,
        }).start(),
      ]);
    }
  }

Answer 1

在运行动画之前，您必须将动画值添加为零:-

componentDidUpdate() {
    // stopClock(clock);
   //Setting animations values as zero
    this.val.setValue(0);
    this.scale.setValue(0);
    if (this.state.visible) {
      block([
        timing(this.val, {
          toValue: 1,
          duration: 100,
          easing: Easing.inOut(Easing.ease),
        }).start(),
        spring(this.scale, {
          toValue: 1,
          damping: 12,
          mass: 0.6,
          stiffness: 150.6,
          overshootClamping: false,
          restSpeedThreshold: 0.1001,
          restDisplacementThreshold: 0.001,
        }).start(),
      ]);
    } else {
      block([
        timing(this.val, {
          toValue: 0,
          duration: 0,
          easing: Easing.inOut(Easing.ease),
        }).start(),
        spring(this.scale, {
          toValue: 0,
          damping: 12,
          mass: 0.6,
          stiffness: 150.6,
          overshootClamping: false,
          restSpeedThreshold: 0.001,
          restDisplacementThreshold: 0.001,
        }).start(),
      ]);
    }
  }