2016-05-23 15 views
0
私は雄弁JavaScriptからJavaScriptを学習し、次のコードに遭遇してい

http://eloquentjavascript.net/13_dom.html からrequestAnimationFrame引数を関数に渡すと、何とか渡されますか?

<p style="text-align: center"> 
    <img src="img/cat.png" style="position: relative"> 
</p> 
<script> 
    var cat = document.querySelector("img"); 
    var angle = 0, lastTime = null; 
    function animate(time) { 
    if (lastTime != null) 
     angle += (time - lastTime) * 0.001; 
    lastTime = time; 
    cat.style.top = (Math.sin(angle) * 20) + "px"; 
    cat.style.left = (Math.cos(angle) * 200) + "px"; 
    requestAnimationFrame(animate); 
    } 
    requestAnimationFrame(animate); 
</script> 

を私は、時間の値はアニメーションが初めて呼び出されたときに、その値を取得する方法ものの理解していません。 requestAnimationFrameのアニメーション化するための時間引数を渡しているかのようだが、どのようにそれがどこでコールバックメソッドを示し、単一の引数、DOMHighResTimeStampを、渡された>

答えて

0

から引数を取得しない、ということかわかりません現在の時刻は、requestAnimationFrameのでキューに入れられたコールバックは、ブラウザがページを更新/再描画するたびに呼び出すコールバック関数に

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

アニメーションを発射し始めたとき。

通常、関数requestAnimationFrameは、モニタのリフレッシュレート(たとえば60fps)に従って呼び出されます。したがって、コールバック関数を呼び出してキャンバスを再描画するたびに、現在の時刻が設定されます。

基本となる枠組みの中で、このようなもの

window.requestAnimationFrame = function(callback, element) { 
     var currTime = new Date().getTime(); 
     var timeToCall = Math.max(0, 16 - (currTime - lastTime)); 
     var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
      timeToCall); 
     lastTime = currTime + timeToCall; 
     return id; 
    }; 

http://creativejs.com/resources/requestanimationframe/するrequestAnimationFrameのためのコードを想像してみては機能とフレームワークについての明確な説明を提供します。

関連する問題