使用setInterval的Javascript动画不起作用

时间:2018-05-02 06:11:03

标签: javascript css animation

我正在制作一个彗星熄灭的简单动画。

这是彗星本身:

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';
        }
    }
}

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

1 个答案:

答案 0 :(得分:1)

  

我必须刷新页面才能再次运行动画

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

要重新运行或继续运行,可能只需重置彗星的位置:

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