javascriptで移動する要素

Question

javascriptで要素を移動するためのベストプラクティスは何ですか？ タイムアウトまたは間隔を使用していますか？ 時間が10ミリ秒のイベントを取得するのは悪いですか、それとも正確でしょうか？ ピクセル単位で移動しますか、または合計距離の一定割合を移動しますか？ 間隔を使用する場合、要素が定位置にあるときに間隔をどのように停止しますか？

私がjavascriptのモーションを見た最後の2回はjQueryとRaphael.jsであり、どちらもソースコードを理解できません。どこでもよいチュートリアルやコード例がありますか？ jQueryが使用するメソッドの簡単な説明はありますか？

Answer 1

ここであなたは良いJavascriptのアニメーションのチュートリアルを見つけることができます。 Jquery Animateは、setTimeoutを使用して、期間、位置およびイージングの計算に基づいてオブジェクトを移動します。

Answer 2

できるだけ早く機能を実行する​​という最近の機能があります。これは、がアニメーションの目的でになったため、良い方法です。

コーディングに関しては、それはsetTimeoutと同じです。機能が終了したら​​と呼んでください。

この関数では、現在時刻を取得して、その時点でのオブジェクトの配置方法を確認します。

保留中の機能をキャンセルするには、cancelRequestAnimationFrameを返します。戻り値は​​です。

現在のところ、これはクロスブラウザではなく、関数はベンダー接頭辞です。 Chrome用webkitRequestAnimationFrame例えば、http://jsfiddle.net/pimvdb/G2ThU/1/。

var div = document.getElementById('div'); 
var animation; 

function move() { 
    var time = Math.round((new Date()).getTime()/10) % 200; 

    div.style.left = time + 'px'; 

    animation = requestAnimationFrame(move); 
} 

document.getElementById("start").onclick = function() { 
    animation = requestAnimationFrame(move); 
} 

document.getElementById("stop").onclick = function() { 
    cancelRequestAnimationFrame(animation); 
} 

Answer 3

フレームごとに1回ではなくコードで1回だけ設定するため、インターバルが望ましいと思います。作成されるたびにコードを読み取るのではなく、コードを一度読み取ってそれを何度も再利用するだけです。

10msが少し短いです。コンピュータは約16msの間隔を本質的にサポートすることができ、より正確なタイマをより高速な間隔で使用することができますが、これらは非常に電力消費があります。 IE9は、コンピュータの電源設定に応じて両方をサポートしますが、理想的には50ms（20FPS）より速いものは必要ありません。

アニメーションを開始してから経過した時間に基づいて、私は合計距離の一部を移動するのが好きです。この方法では、コンピュータとブラウザの速度に関係なく、アニメーションは常に正確に同じ時間量を使用します。保証される。

のような何か：

interval = setInterval(function() { 
    // do stuff 
    if(/*animation ended*/) clearInterval(interval); 
},time); 

jQueryのは、いくつかのために簡単ですが、個人的に私は何も平野、古いJSでそれを自分で書い勝るものはありません見つけます。正確に何が起こっているのかを理解することは、あなたのために正しいフレームワークに頼るよりもずっと簡単です。 http://www.schillmania.com/content/projects/javascript-animation-1

をしかし、あなたが言ったことは正しいです：