できるだけ早く機能を実行するという最近の機能があります。これは、がアニメーションの目的でになったため、良い方法です。
コーディングに関しては、それは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);
}
どうすればよりダイナミックにすることができますか?私は正確なものを指定するのではなく、関数を使用して間隔を削除できるようにしたい。私は間隔がどのようにして渡されるのかわかりません。 – mowwwalker
変数が 'var'でクロージャで定義されていて、そのクロージャで上書きしない場合は、何も問題ありません。 –