我有一个循环动画，其中包括几个简单的动画：
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);
}
}型
1条答案
按热度按时间7eumitmz1#
您可以通过计算最终值和暂停时的剩余时间来实现暂停和恢复，并使用这些值恢复动画。
首先，将侦听器添加到动画值并保存这些值。
字符串
类似地，为所有其他动画添加侦听器。之后，序列代码将如下所示。
型
按下按钮时（第一次交互），在所有动画值上调用stop animation。此时，存储在侦听器中的值将具有动画暂停的值。例如，如果animateUp已经完成并且fade正在运行，则此.fadeValue此时可能具有0.25 etc值。并且此.state.animateUp将已经具有最终值，即0，所以我们重新开始的时候它不会运行
型
现在你需要计算动画的剩余时间。如果从fadeValue 0到1的总时间是1500（（1-0）/1500），那么，渐变动画的其余部分的时间可以用相同的方法计算（（1-0.25）/1500）。这将是您的简历部分的动画持续时间。公式为（（finalValue - currentValue）/totalTime）。每个动画的当前值将是存储在侦听器中的值。
现在，当再次按下按钮时，您将按照上面的描述计算每个动画值的剩余时间，并将使用上面计算的持续时间再次启动动画序列。如果animateUp已完成且fadeValue正在运行，则使用公式的animateUp的持续时间将为0。您将使用更新的持续时间调用动画序列。
序列完成后，可以通过重置所有动画的当前侦听器值来重新启动序列，以便重新计算持续时间，并将所有动画持续时间重置回原始值
型
让我知道如果你有任何问题的理解。