javascript - 悬停在桌面上时启动抽奖动画

Question

我希望我的抽奖动画在悬停在桌面上时开始动画并在移动视图上自动播放。有没有办法做到这一点？

我希望动画在光标关闭时倒回 像这样的东西

这是我用来制作动画的代码。

谢谢

export default function Landing() {
    useHorizontal();

    const box1 = {
        loop: true,
        autoplay: true,
        animationData: svg1,
        rendererSettings: {
            preserveAspectRatio: 'xMidYMid slice',
        },
    };
    const box2 = {
        loop: true,
        autoplay: true,
        animationData: svg2,
        rendererSettings: {
            preserveAspectRatio: 'xMidYMid slice',
        },
    };
    const box3 = {
        loop: true,
        autoplay: true,
        animationData: svg3,
        rendererSettings: {
            preserveAspectRatio: 'xMidYMid slice',
        },
    };

    return (
        <div className="app" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <Lottie options={box1} height={900} width={900} />
            <Lottie options={box2} height={900} width={900} />
            <Lottie options={box3} height={900} width={900} />
        </div>
    );
}

标签： javascriptreactjssvglottiebodymovin