Fatal编程技术网
  • javascript/
  • Javascript 如何在屏幕上移动动画

Javascript 如何在屏幕上移动动画

javascript css html

Javascript 如何在屏幕上移动动画,javascript,css,html,webpage,Javascript,Css,Html,Webpage,我已经制作了一个吃豆人张开和合上嘴巴的动画，但我也想让它在屏幕上移动。我使用了setTimeout（），可以在屏幕上显示一个图像，但不能显示实际的动画。如何使用纯JS实现这一点 这是我的HTML <body> <div id="animation"> <img id="pacManImg" src="pacMan1.png" width="50" height="50" /> <img id="pacManImg" src="pacM

我已经制作了一个吃豆人张开和合上嘴巴的动画，但我也想让它在屏幕上移动。我使用了setTimeout（），可以在屏幕上显示一个图像，但不能显示实际的动画。如何使用纯JS实现这一点

这是我的HTML

<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>
只需使用
i
增加
left
属性：

setInterval(function() {
    frames[i % frameCount].style.display = "none";
    frames[++i % frameCount].style.display = "block";
    document.getElementById("animation").style.left = i + "px";
});
注意，这需要
位置：绝对在CSS中。
类似于
帧[i%frameCount].style.left=frames[i%frameCount].style.left.slice（0，-2）+“px”
，如果帧的位置绝对超过我一毫秒（：我尝试了你的建议，但它不会移动（如在屏幕上行走）。这就是我在CSS中的动画img{显示：无；位置：绝对；}#动画img：第一个子{位置：绝对；显示：块；}这是正确的吗？不，你需要
#动画
具有
位置：绝对；
非常感谢你的帮助。我还想知道，有没有一种方法可以清除间隔，停止动画，使用你提供的代码示例？我已经在类似var timer=setInterval的情况下完成了，然后调用timer来清除它

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