使用回调值重新启动动画

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
...
}

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