React native 使用回调值重新启动动画

我有一个循环动画，由几个简单的动画组成：

Animated.sequence([
        Animated.timing(this.state.animateUp, {toValue: 0, duration: 1500}),
        Animated.timing(this.state.fadeValue, {toValue: 1, duration: 500}),
        Animated.parallel([
          Animated.timing(this.state.opacity, {toValue: 0, duration: 1000}),
          Animated.timing(this.state.frontRotation, { toValue: 1, duration: 300, }),
        ]),

        Animated.timing(this.state.toWhite, {toValue: 1, duration: 1000, delay: 11500}),
      ]);

我正在尝试通过一个功能来停止触摸，该功能可以停止每个动画，如：

this.state.animateUp.stopAnimation(this.callback) 

然后在第二次触摸手势中，我想用回调值运行相同的动画。是否有任何方法将回调值传递回函数，以及如何实现

提前谢谢

编辑：动画未启动

constructor(props) {
    super(props);
    this.state = {
      opacity: new Animated.Value(1),
      animateUp: new Animated.Value(-500),
      animateUpTime: new Animated.Value(1500),
      fadeValue: new Animated.Value(0),
      fadeValueTime: new Animated.Value(500),
      toWhite: new Animated.Value(0),
      toWhiteTime: new Animated.Value(11500),
      measurements: {},
      frontRotation: new Animated.Value(0),
      frontRotationTime: new Animated.Value(300),
      paused: false


    };
  }
  testPause(){
    this.animateUpListener = this.state.animateUp.addListener(({value}) => this.animateUpValue = value)
    this.fadeValueListener = this.state.fadeValue.addListener(({value}) => this.fadeValue = value)
    this.opacityListener = this.state.opacity.addListener(({value}) => this.opacityValue = value)
    this.frontRotationValueListener = this.state.frontRotation.addListener(({value}) => this.frontRotationValue = value)
    this.toWhiteListener = this.state.toWhite.addListener(({value}) => this.toWhiteValue = value)
    if(this.state.paused){
      this.state.animateUpTime = (1-this.animateUpValue)/1500
      this.state.fadeValueTime = (1-this.fadeValue)/500
      this.state.opacityValueTime = (1-this.opacityValue)/1000
      this.state.frontRotationTime = (1-this.frontRotationValue)/300
      this.state.toWhiteTime = (1-this.toWhiteValue)/11500


      this.setState({paused: false})
    } else {
      this.state.animateUp.stopAnimation();
      this.state.fadeValue.stopAnimation();
      this.state.opacity.stopAnimation();
      this.state.frontRotation.stopAnimation();
      this.state.toWhite.stopAnimation();
      this.setState({paused: true})}

}
  render() {
    var spin = this.state.frontRotation.interpolate({
      inputRange: [0, 1],
      outputRange: ['0deg', '90deg']
    })


    return (

    );
  }

   animateFront() {

    return Animated.sequence([
        Animated.timing(this.state.animateUp, {toValue: 0, duration: this.state.animateUpTime}),
        Animated.timing(this.state.fadeValue, {toValue: 1, duration: this.state.fadeValueTime}),
        Animated.parallel([
          Animated.timing(this.state.opacity, {toValue: 0, duration: this.state.opacityValueTime}),
          Animated.timing(this.state.frontRotation, { toValue: 1, duration: this.state.frontRotationTime, }),
        ]),

        Animated.timing(this.state.toWhite, {toValue: 1, duration: this.state.frontRotationTime, delay: 11500}),
      ]).start(() => this.restartAnimation());

   }

componentDidMount(){
  this.animateFront()
}
    restartAnimation(){
        this.animateUpValue = -500; //initialvalue
        this.fadeValue = 0; //initialvalue
        this.opacity = 1;
        this.toWhite = 0;
        this.frontRotation = 0;
        this.video.seek(0);
        this.state.animateUp.setValue(-500); //initialValue
        this.state.fadeValue.setValue(0); //initialValue
        this.state.opacity.setValue(1);
        this.state.toWhite.setValue(0);
        this.state.frontRotation.setValue(0);

    }
}

---

可以通过计算暂停时间的最终值和剩余时间来实现暂停和恢复，并使用这些值恢复动画

首先，将侦听器添加到动画值并保存这些值

this.animateUpListener = this.state.animateUp.addListener(({value}) => this.animateUpValue = value);
this.fadeValueListener = this.state.fadeValue.addListener(({value}) => this.fadeValue = value);

类似地，为所有其他动画添加侦听器。在这之后，序列代码将如下所示

Animated.sequence([
        Animated.timing(this.state.animateUp, {toValue: 0, duration: 1500}),
        Animated.timing(this.state.fadeValue, {toValue: 1, duration: 500}),
        Animated.parallel([
          Animated.timing(this.state.opacity, {toValue: 0, duration: 1000}),
          Animated.timing(this.state.frontRotation, { toValue: 1, duration: 300, }),
        ]),

        Animated.timing(this.state.toWhite, {toValue: 1, duration: 1000, delay: 11500}),
      ]).start(() => this.restartAnimation());

按下按钮时（第一次交互），调用所有动画值上的停止动画。此时，侦听器中存储的值将具有动画暂停时的值。例如，如果animateUp已完成且淡入淡出正在运行，则此时this.fadeValue可能具有0.25 etc值。并且this.state.animateUp已经有了最终值，即0，因此在我们继续时它不会运行

this.state.animateUp.stopAnimation();
this.state.fadeValue.stopAnimation();

现在需要计算动画的剩余时间。如果从fadeValue 0到1的总时间为1500（（1-0）/1500），则可以使用相同的方法（（1-0.25）/1500）计算其余淡入淡出动画的时间。这将是恢复部分动画的持续时间。公式为（（最终值-当前值）/totalTime）。每个动画的当前值将是存储在侦听器中的值

现在，当再次按下按钮时，您将按上述方式计算每个动画值的剩余时间，并将使用上述计算的持续时间再次启动动画序列。如果animateUp已完成且fadeValue正在运行，则animateUp使用公式的持续时间将为0。您将使用更新的持续时间调用动画序列

序列完成后，可以通过重置所有动画的当前侦听器值来重新启动序列，以便重新计算持续时间，并将所有动画持续时间重置回原始值

restartAnimation() {
  this.animateUpValue = 0; //initialvalue
  this.fadeValue = 0; //initialvalue
  ...

  this.state.animateUp.setValue(0); //initialValue
  this.state.fadeValue.setValue(0); //initialValue
  ...
}

---

如果您在理解方面有任何问题，请告诉我。

您可以通过计算暂停时间的最终值和剩余时间来实现暂停和恢复，并使用这些值恢复动画

首先，将侦听器添加到动画值并保存这些值

this.animateUpListener = this.state.animateUp.addListener(({value}) => this.animateUpValue = value);
this.fadeValueListener = this.state.fadeValue.addListener(({value}) => this.fadeValue = value);

类似地，为所有其他动画添加侦听器。在这之后，序列代码将如下所示

Animated.sequence([
        Animated.timing(this.state.animateUp, {toValue: 0, duration: 1500}),
        Animated.timing(this.state.fadeValue, {toValue: 1, duration: 500}),
        Animated.parallel([
          Animated.timing(this.state.opacity, {toValue: 0, duration: 1000}),
          Animated.timing(this.state.frontRotation, { toValue: 1, duration: 300, }),
        ]),

        Animated.timing(this.state.toWhite, {toValue: 1, duration: 1000, delay: 11500}),
      ]).start(() => this.restartAnimation());

按下按钮时（第一次交互），调用所有动画值上的停止动画。此时，侦听器中存储的值将具有动画暂停时的值。例如，如果animateUp已完成且淡入淡出正在运行，则此时this.fadeValue可能具有0.25 etc值。并且this.state.animateUp已经有了最终值，即0，因此在我们继续时它不会运行

this.state.animateUp.stopAnimation();
this.state.fadeValue.stopAnimation();

现在需要计算动画的剩余时间。如果从fadeValue 0到1的总时间为1500（（1-0）/1500），则可以使用相同的方法（（1-0.25）/1500）计算其余淡入淡出动画的时间。这将是恢复部分动画的持续时间。公式为（（最终值-当前值）/totalTime）。每个动画的当前值将是存储在侦听器中的值

现在，当再次按下按钮时，您将按上述方式计算每个动画值的剩余时间，并将使用上述计算的持续时间再次启动动画序列。如果animateUp已完成且fadeValue正在运行，则animateUp使用公式的持续时间将为0。您将使用更新的持续时间调用动画序列

序列完成后，可以通过重置所有动画的当前侦听器值来重新启动序列，以便重新计算持续时间，并将所有动画持续时间重置回原始值

restartAnimation() {
  this.animateUpValue = 0; //initialvalue
  this.fadeValue = 0; //initialvalue
  ...

  this.state.animateUp.setValue(0); //initialValue
  this.state.fadeValue.setValue(0); //initialValue
  ...
}

---

如果您在理解上有任何问题，请告诉我。

回调值是什么意思？你能详细说明一下你想实现什么吗？当组件装载时，我运行的是animateFunction（），里面有列出的动画。我创建了一个按钮，用于停止所有动画，并获取回调值（this.state.animateUp.stopAnimation（this.callback））。在第二次与按钮交互时，我希望将从stopAnimation接收到的回调值传递给animateFunction（）并运行它。（简而言之，该按钮应作为动画的暂停）。我所说的回调值是指停止动画时的值。你所说的回调值是什么意思？你能详细说明一下你想实现什么吗？当组件装载时，我运行的是animateFunction（），里面有列出的动画。我创建了一个按钮，用于停止所有动画，并获取回调值（this.state.animateUp.stopAnimation（this.callback））。在第二次与按钮交互时，我希望将从stopAnimation接收到的回调值传递给animateFunction（）并运行它。（简而言之，该按钮应作为动画的暂停）。我所说的回调值是指停止动画时的值。谢谢，这看起来真的是解决我问题的方法！但是，是否应在pauseFunction中添加侦听器，并且在计算当前值后，如何在新动画序列开始时传递该值？您只需添加一次侦听器。它们被添加到驱动动画的状态变量（this.state.animateUp等）中，因此您无需再次添加它们。动画在状态变量（this.state.animateUp等）的值上发生，当您暂停动画时，状态变量将具有暂停时的值。在恢复时，状态变量将自动从相同的值启动动画，因此您无需重新启动