スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ！（Frontrend Advent Calendar 2013 – 06日目） | Ginpen.com
（追記: 2018年10月）何年か経ってから見ても内容大丈夫そうでした。 この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。（これ今後数年で大流行りしそうに思うので、未読なら是非！） さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが（周回遅れ）、いざアニメーションを実装してみても、なかなかスムーズに動いてくれなかったりしますね。 どうやったらスムーズに動くかってのを解説したいと思います。 なおこの辺りの情報は、概ね斎藤さんを中心としたFrontrend絡みの方々に教えて頂きました。感謝感謝。 先に結論 概念的なの GPU合成レイヤーを適切に使うと早い いわゆるハードウェアアクセラレーション 何がCPUで、何
Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe
HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loaders.css
