Javascriptを：翻訳アニメーションエラー

Question

私はJavaScriptで宇宙inviderを作成したいと思います：

私は宇宙船の位置を取得する機能を持っている：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）;ミサイルは一度に流動的ではありません（これは問題です）。しかし、私がを使用すると、setInterval（tirer、6000）;クロムが渇望し、私は無限ループがあると思う。

Answer 1

より信頼性の高いrequestanimationframeを使用してみてください。少し違って動作しますが、非流動性の問題を解決します。

ここから開始できますか？ （またはGoogle）

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()を使用するよりもはるかに優れていますが、現在の問題はこの原因ではないと思います。