javaScript 动画图像 onmouseover/onmouseout

Question

我有一个开门动画（41 帧），我想使用 javaScript 让它在鼠标悬停时打开，我希望它回到第 1 帧 onmouseout。我不认为我在 onmouseout 部分做得很正确。提前感谢您的帮助！

HTML:
    <div onmouseover="startAnimation()" onmouseout="stopAnimation()" 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...(41 frames)

css:
    #door img{
    display: none;
    }

    #door img:first-child {
    display: block;
    }

javaScript:
    function startAnimation() { 
    var frames = document.getElementById("door").children;
    var frameCount = frames.length;

    for (i=0; i<41; i++) {
    setTimeout(function(){
    frames[i % frameCount].style.display = "none";
    frames[++i % frameCount].style.display = "block";
    }, 50*i);
    }
    }

    function stopAnimation() {
    var frames = document.getElementById("door").children;
    var frameCount = frames.length;

    for (i=0; i<1; i++){
    setTimeout(function(){
    frames[++i % frameCount].style.display = "none";
    frames[i % frameCount].style.display = "block";
    }, 50*i);
    }
    }

这里有一个链接： http://www.reveriesrefined.com/test

Answer 1

我认为这可能更像你想要的：

var ti, frame = 0,
frames = document.getElementById('door').children;

function resetAnimation() {
    frame = 0;
    frames[0].style.display = 'block';
    for (var i = 1; i < frames.length; i++) {
        frames[i].style.display = 'none';
    }
}
function startAnimation() {
    console.log('start animation');
    resetAnimation();
    ti = setInterval(function() {
        frames[frame].style.display = 'none';
        frame ++;
        if (frame >= frames.length) frame = 0;
        frames[frame].style.display = 'block';
    }, 50);
}
function stopAnimation() {
    if (ti) {
        clearInterval(ti);
        ti = undefined;
    }
    resetAnimation();
}​

请注意，当您想要连续动画时，通常使用 setInterval 比使用 setTimeout 更合适。一个全局变量存储我们当前正在查看的帧。 resetAnimation 将帧设置为零并相应地设置显示。 startAnimation 设置一个间隔计时器，它隐藏旧帧，将帧增加一帧，并显示新帧，每 50 毫秒。停止动画只是清除间隔计时器并重置动画。