reactjs - 反应原生动画动画一次

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(),
      ]);
    }
  }