0

我有一个开门的动画（41 帧），我想使用 javaScript 让它在 onmouseover 上打开，我希望它回到第 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

4

1 回答 1

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 毫秒。停止动画只是清除间隔计时器并重置动画。

于 2012-12-02T00:31:37.690 回答