带有 setInterval 的 Javascript 动画不起作用

Question

我正在制作一个 cometd 坠落的简单动画。

这是 cometd 本身:

var cometScene = function(){
    var b = document.createElement('div');
    b.id = 'cometio';


    var cometImage = document.createElement('img');

    cometImage.setAttribute('src', 'images/comet1.png');
    b.appendChild(cometImage);

    document.getElementById('wrap').appendChild(b);
}

这是一步:

function cometMove(){
    var comet = document.getElementById('cometio');
    var pos = 0;
    var interval = setInterval(scene, 3);

    function scene(){
        if (pos === 1000){
            clearInterval(interval);
        } else {
            pos++;
            comet.style.top = pos + 'px';
            comet.style.left = pos + 'px';
        }
    }
}

但问题是它只发生一次，然后我必须刷新页面才能再次运行动画。我在这里做错了什么？

Answer 1

I have to refresh the page to run an animation again

if (pos === 1000){
   clearInterval(interval); /* you have stopped animation here */
}

要重新运行或继续运行，可能你可以重置 cometd 的位置:

if (pos === 1000){
   pos = 0;
}