Javascript:翻译动画错误

Question

我想用 javascript 创建一个空间 invider:

我有一个获取 spaceship 位置的函数:getstylevaiss并将其返回( left-margin )，以便我可以使用此函数定位导弹:

function tir(event){
    var actusizevaiss= getstylevaiss();
    var missile=document.getElementById("missile");
    if (event.which==38)
    {
        missile.style.marginLeft=actusizevaiss+"px";
        missile.style.bottom= "100px";
        missile.style.display="block"; // it was "none" before
        missile.style.position="absolute";
        while (parseInt(missile.style.bottom)<800) // while we are into the container
        {
        var animation = setInterval(tirer(),6000);
        }
          clearInterval(animation); 
    }
}

function getstylevaiss (){
    var vaiss= document.getElementById("vaisseau");
    var sizevaiss= vaiss.currentStyle ||window.getComputedStyle(vaiss);
    var actusizevaiss=parseInt(sizevaiss.marginLeft);
    return actusizevaiss;
}

这是从下到上翻译的函数:

function tirer(){
        var missile=document.getElementById("missile");
        var currt= missile.currentStyle ||window.getComputedStyle(missile);
        missile.style.bottom= parseInt(currt.bottom)+20+"px";
}

当我使用setInterval(tirer(),6000);时，导弹会在一次不流畅的情况下到达顶部(这就是问题)。但是当我使用 setInterval(tirer,6000); Chrome 时，我认为存在无限循环。

Answer 1

尝试使用更可靠的 requestanimationframe:它的工作方式略有不同，但它会修复您不流畅的体验。

也许从这里开始？ (或谷歌)

https://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/