requestAnimationFrame ＜ よーしおまえらー、アニメーションにsetInterval使うなよー - くろまほうさいきょうでんせつ
より適切なものが追加されたのでそっちを使いましょう。 setInterval/setTimeout → requestAnimationFrame; これまでは setInterval function render(){ // アニメーション 1フレーム分の処理 } setInterval(render, 1000 / 60); これはもう古い。 これからは requestAnimationFrame function animationLoop(){ render(); requestAnimationFrame(animationLoop); } animationLoop(); こうすべし。 requestAnimationFrameにすると何がいいの？ 複数のアニメーション描写処理を一つにまとめて最適化してくれる 同じ用に動かしている物体A,Bの動きが次第にずれていくとかがなくな
いまさらrequestAnimationFrameを理解する - console.lealog();
理解できたらいいな・・。 だいぶ今さら感はあるのですが、改めて知っておきたいタイミングなので。 参考：window.requestAnimationFrame - Web API リファレンス | MDN 一定間隔で処理を繰り返す CanvasでもCssアニメーションでも、「描画処理を繰り返し実行する」ところは一緒。 そこをどうやって実装するかという話で、今まではsetIntervalやsetTimeoutを再帰で呼んだりしてました。 setInterval var anim = function() { console.log('Animations here.'); }; window.setInterval(anim, 1000); 一番わかりやすいし手軽です。 だいたいいつもコレなんじゃないでしょうか。 setTimeout var anim = function() { cons
非アクティブなときのsetTimeout/setIntervalとrequestAnimationFrame - hokaccha memo
#9381 (animations halt when the browser is out of focus due to requestAnimationFrame) – jQuery - Bug Tracker この問題についてちょっと調べたけど、setIntervalとかsetTimeoutはタブが非アクティブなときは、1000ms以下で設定してる場合1000msで実行されるみたい。1000ms以上のときは普通にそのまま実行される。んでrequestAnimationFrameは非アクティブなときは実行されない。 これが原因で、アニメーションの呼び出し元はsetTimeoutで回してるので非アクティブ時に実行されてキューにアニメーションがどんどん溜まる。でもrequestAnimationFrameは実行されないのでキューが溜まるのみで実行はされない。でアクティブになったときに一気
JavaScript でゲームループを作る (The Game Loop) @ t100のプログラミング脱出作戦
Javascript Game Development - The Game Loop こちらのブログで面白そうな記事を見つけたので、翻訳に挑戦してみます。 訳がヘタレなのはご容赦下さい。(´・ω・｀) 誤訳を見つけたら教えて頂けると嬉しいです！ ゲームエンジンの最も重要なパーツの一つに、ゲームループと呼ばれるものがあります。 これは、ゲームエンジンの中心的な部品で、実行中のゲームロジックのバランスを調整し、実行結果の描画を行う役割があります。 もっとも基本的なゲームループは、JavaScriptでもこんな風に見えます。（これは、ブラウザで動きません！） A very basic game loop would look something like this in JavaScript (this does not work in Browsers!): ブラウザで動くようにゲームループ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryで破棄されたrequestAnimationFrameとJSでのアニメーション実装で注意すること