Question

我有一个循环动画，其中包含几个简单的动画：

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);

    }
}

Answer 1

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

首先，为您的动画值添加侦听器并保存值。

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等值。而this.state.animateUp已经有了最终值，即0，所以当我们恢复时它不会运行。

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

现在您需要计算动画的剩余时间。如果从fadeValue 0到1的总时间是1500（（1-0）/ 1500）那么，其余淡入淡出动画的时间可以用相同的方式计算（（1-0.25）/ 1500）。这将是您恢复部分动画的持续时间。公式为（（finalValue - currentValue）/ 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
  ...
}

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

使用回调值重新启动动画

1 个答案: