gpt4 book ai didi

javascript - 如何在屏幕上移动动画js

转载 作者:行者123 更新时间:2023-11-30 14:08:29 25 4
gpt4 key购买 nike

我创建了一个吃 bean 人张开和合上嘴巴的动画,但我也想让它在屏幕上移动。我玩过 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>

我正在为我的 js 使用它

function startAnimation() { 
var frames = document.getElementById("animation").children;
var frameCount = frames.length;
var i = 0;
setInterval(function () {
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
}, 300);
}

最佳答案

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

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

请注意,这需要 position: absolute; 在您的 CSS 中。

关于javascript - 如何在屏幕上移动动画js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54897898/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com