我搜索了但找不到相同的情况:我只想暂停然后继续(恢复)动画。
我制作了一个简单的本机应用程序,其中图像从上到下循环移动(顶部值从0到500,然后从500到0)。
点击文本时,图像的移动将暂停,如果再次点击,它将恢复移动。图像移动不定。
但是当我尝试许多变体时,没有任何效果:恢复图像移动时,图像从0的顶部开始,而不是从暂停位置开始。
我阅读了原始的Animated文档和其他文档,但是由于我不完全了解Animated.Value的处理方式,因此对我来说似乎是一个难题。在我的示例中,我将dialogTop的值设置为pausedValue,这是暂停的位置(此值是正确的),但是动画始终从0开始。 (是的,此代码不是很正确,因为它不在乎移动方向,但是现在我不在乎,我只是希望它从暂停的位置移动。)
const [pause,setPause] = useState(false);
const [pausedValue,setPausedValue] = useState(0);
const [dialogTop] = useState(new Animated.Value(pausedValue))
useEffect(() => {
Animated.loop(
Animated.sequence(
[
Animated.timing(dialogTop,{
toValue: 500,duration: 5000,}),Animated.timing(dialogTop,{
toValue: 0,})
]
)
).start();
},[]);
...
<Animated.Image
source={{
uri: "https://pmcvariety.files.wordpress.com/2019/08/frozen-adventures-mobile-game.jpg?w=1000&h=563&crop=1"
}}
style={{
height: '30%',width: '100%',position: 'absolute',top: dialogTop,left: 0
}} />
...
<TouchableOpacity
...
onPress={() => {
if (!pause) {
dialogTop.stopAnimation(value => {
setPausedValue(value);
});
} else {
dialogTop.setvalue(pausedValue);
Animated.loop(
Animated.sequence(
[
Animated.timing(dialogTop,})
]
)
).start();
}
setPause(!pause);
}}>
...