Question

我想在javascript中创建一个空间调用器：

我有一个获得宇宙飞船位置的函数： getstylevaiss 并将其返回（左边距），以便我可以使用此函数定位missil：

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）; 时，missil会在一次不到流量的情况下到达顶部（这就是问题所在）。但是，当我使用 setInterval（tirer，6000）; Chrome得到了破解，我认为有一个无限循环。

Answer 1

尝试使用更可靠的requestanimationframe：它的工作方式略有不同，但它可以帮助您解决非流动性问题。

也许从这里开始？（或谷歌）

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

Answer 2

如果这一行：missile.style.bottom= parseInt(currt.bottom)+20+"px";是您的对象的动画，而您的问题是它一次性更改位置而不是顺利进行，则需要在此处使用css过渡。

#missile
{
  transition: bottom 1s linear;
}

如果导弹所覆盖的距离在不同的情况下不同，这不是最可靠的方法，因为现在导弹总是需要1秒才能完成过渡，无论距离是多少。希望有所帮助。

是的，您应该使用requestAnimationFrame()，这比使用setInterval()要好得多，但我认为您当前的问题不是由于此原因。

Javascript：翻译动画错误

2 个答案: