Question

我创建了一个吃豆人嘴巴张开和关闭的动画，但我也希望它在屏幕上移动。我已经玩过setTimeout（）了，我可以得到一张图像在屏幕上显示，但不能显示实际的动画。我该如何使用纯JS做到这一点。

这是我拥有的HTML

>= WARNING

我正在将其用于我的js

<body>
  <div id="animation">
    <img id="pacManImg" src="pacMan1.png" width="50" height="50" />
    <img id="pacManImg" src="pacMan2.jpg" width="50" height="50" />
</div>
<button onclick="startAnimation()"> Start</button>
</body>

Answer 1

只需使用i来增加left属性：

setInterval(function() {
    frames[i % frameCount].style.display = "none";
    frames[++i % frameCount].style.display = "block";
    document.getElementById("animation").style.left = i + "px";
});

请注意，这需要CSS中的position: absolute;。

如何跨屏幕js移动动画

1 个答案: