0

我试图让 20 - 50 颗星“闪烁”（不透明度随随机间隔变化），但这会减慢应用程序的速度。

我正在使用复活的 2.2.0。

我尝试共享不透明度值，但只有 1 个元素应用了样式，我认为这可能是因为：“动画样式不能在视图之间共享。 ”

这是我的整个组件

function TwinklingStar({ position, size }) {
    const starOpacity = useSharedValue(1);

    useEffect(() => {
        setInterval(() => {
            starOpacity.value = withSpring(starOpacity.value ? 0 : 1)
        }, getRandomInt(500, 1000))
    }, []);

    const twinkling = useAnimatedStyle(() => ({
        opacity: starOpacity.value
    }));

    return (
        <Animated.Image 
            source={sparkleImage}
            resizeMode="cover" 
            style={[{
                width: size,
                height: size,
                position: 'absolute',
                top: position.y,
                left: position.x
            }, twinkling]} 
        />
    )
}

每张卡可能有 5 个，并且随机数量的卡，比如说 5-20 个。

我已经阅读了文档，但认为我没有正确理解它们，因为我无法弄清楚为什么应用程序正在爬行/冻结/崩溃。就像所有的动画都阻塞了 js 线程，但它们应该在 ui 线程上运行，因为不透明度的变化是由 useAnimatedStyle 钩子“捕获”的，它是一个“worklet”？

使困惑...

4

0 回答 0