React Native-暂停并恢复动画

我搜索了但找不到相同的情况:我只想暂停然后继续(恢复)动画。

我制作了一个简单的本机应用程序,其中图像从上到下循环移动(顶部值从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);
}}>
...

hirxn45624 回答:React Native-暂停并恢复动画

尝试使用此库也许对您有用https://github.com/wix/react-native-interactable

该库使用这些道具并具有自己的逻辑,提供了许多不错的道具和功能,您可以根据需要构建动画。

本文链接:https://www.f2er.com/3162740.html

大家都在问