0

ドアが開くアニメーション (41 フレーム) があり、javaScript を使用してマウスオーバーで開くようにし、マウスアウトでフレーム 1 に戻りたいと考えています。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();
}​

通常、連続したアニメーションが必要な場合は、setTimeout よりも setInterval を使用する方が適切であることに注意してください。グローバル変数は、現在表示しているフレームを格納します。resetAnimation はフレームをゼロに設定し、それに応じて表示を設定します。startAnimation は、古いフレームを非表示にし、フレームを 1 つ増やし、50 ミリ秒ごとに新しいフレームを表示するインターバル タイマーを設定します。アニメーションを停止すると、単にインターバル タイマーがクリアされ、アニメーションがリセットされます。

于 2012-12-02T00:31:37.690 に答える