Question

让我们说我有一只猫的gif图像，它持续3秒显示猫走路，之后猫跳了起来。我想实现以下内容：

在特定的容器div中，cat gif（具有透明背景）应该自由行走并跟随光标。这意味着只应播放0-3秒的部分，然后重新启动gif，使其看起来像一个完美的循环。
当用户点击时，cat gif应该跳转，所以应该播放3秒后的部分，然后猫应该再次走路。

我不知道如何纠缠gif的帧。到目前为止我唯一能做的就是＆＃34;关注＆＃34;一部分。

<body>
    <div onmousemove="follow(event)" id="container">
        <img id="cat" src="cat.gif">
    </div>
    <script>
        function follow(event) {
            var cat = document.getElementById("cat");

            cat.style.left = event.pageX + 'px';
            cat.style.top = event.pageY + 'px';

        }
    </script>
</body>

我问的可能吗？我需要2个单独的GIF，一个用于跳跃，一个用于步行，还是一个就足够了？我可以使用一些模块来处理gif部分吗？

如何根据用户的动作播放gif的特定部分

0 个答案: