【发布时间】：2023-03-21 06:22:01
【问题描述】：
我想做什么：
- 一个 JavaScript 动画（总共 114 帧），可以快速连续地将一张图像换成下一张。
-onmouseover 一个门的图像打开。 （播放 72 帧并停留在第 72 帧）
-onmouseout 门关闭。 （播放 42 帧并停留在最后一帧）
-如果在动画完成之前鼠标离开元素，它将完成72帧，然后播放42帧。
- 如果鼠标在 42 帧完成之前移回元素上，它将播放完 42 帧，然后播放 72 帧。
问题：
-我是 javaScript 的菜鸟，还没有完全理解它。
- 尽管它有点工作，但它非常有问题，你不能将鼠标从元素上移开而不弄乱动画。
-另外，我不知道如何让它完成上面列出的所有事情。
这是我现在拥有的代码：
HTML:
<div onmouseover="openDoor()" onmouseout="closeDoor()" id="door2"></div>
<div id="door">
<img src="images/Animation_Door/0001.png">
<img src="images/Animation_Door/0002.png">
<img src="images/Animation_Door/0003.png">
...etc... (114 frames)
</div>
CSS:
#door {
background-color:transparent;
...etc...
}
.door img{
display: none;
}
.door img:first-child {
display: block;
}
javaScript:
function openDoor() {
var ti, frame = 0;
var frames = document.getElementById("door").children;
var frameCount = frames.length;
for (i=0; i<72; i++) {
ti = setTimeout(function(){
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
}, 50*i);
}
}
function closeDoor() {
var ti, frame = 0;
var frames = document.getElementById("door_close").children;
var frameCount = frames.length;
for (i=0; i<42; i++) {
setTimeout(function(){
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
}, 50*i);
}
}
【问题讨论】：
-
1.如果您将这 72 帧作为精灵放在一个物理图像文件中，而不是请求 72 个单独的图像文件，您的动画可能会更快、更流畅。
-
2.为什么不只是一个 GIF 文件？
-
我尝试做一个精灵，但由于我一般缺乏关于 javaScript 的知识而没有取得多大成功。它似乎作为单独的图像运行良好，但如果我能用一个精灵也能做到这一点也很棒。
-
你能发一个小提琴吗？jsfiddle.net——这样我就可以看看它并推荐修复方法。甚至可以只用一个平面门图像和 css 转换来做到这一点。 :-)
-
在这里，现在动画设置为 onClick。另外，我还没有完成最终结果的最终图像的渲染，所以现在 doorOpen() 和 doorClose() 都只有 41 帧，但最终它们将是我最初发布的内容。那里的很多代码都是我网站的其余部分，所以我为混乱的混乱道歉。 jsfiddle.net/reveries/a8Y9J
标签： javascript html css animation settimeout