スムーズなアニメーションを実装するコツと仕組みを説明するよ。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で、何
jQueryで、順番に実行が出来る .when() から .done() が便利だったのでメモ | ARAKAZE NOTE
JavascriptやjQueryを書いていると、「この処理がちゃんと終わってから、こっちの処理を始めたい！」って場面に結構遭遇するのではないかと思います。特にアニメーションを作っているときによくあるのではないでしょうか。 コールバック関数を設定出来る処理なら簡単なのですが、それがないものも結構あったりします。僕が困ったのは.html()や.ajax()でした。なんかいい解決策は無いかなーとググってみたところ.when().done()という処理の仕方が良さげだったので使ってみたらばっちりでした。 .when()には先に終わらせたい処理を書く ざっくりとした説明の仕方をすると、.when()には先に完了させたい処理をまとめて書いておきます。例えば、“横に移動したら、フェードアウトする”みたいな事をしたい場合、“横に移動したら”の部分を.when()の中には書きます。 （まあ、そんな簡単な動
Spriteを使ったJavaScript製のアニメーションライブラリ·Sprite.js MOONGIFT
Sprite.jsはJavaScript製のオープンソース・ソフトウェア。JavaScriptを使ってゲームを作る場合、キャラクターの描画には二種類の方法が考えられるだろう。一つは画像を使う方法、もう一つはドット単位やCanvasを使って直接描画する方法だ。 32体の人形が歩き回るデモ 後者はあまりに面倒だ。だから大抵画像を使った方法を選択するはずだ。そんな時、歩いたりジャンプしたりするアクションごとに画像が分かれていると、予め読み込んでおくデータ数が増えてしまう。それを解決するのがSprite.jsだ。 Sprite.jsがユニークなのは、一枚の画像を使って一つのキャラクターを表現する所にある。つまりGoogleなどがよく使っている小さなアイコン画像を固めて一つの画像ファイルにし、CSSを使って表示場所を切り替えて描画するSpriteをアニメーションに使っているのだ。 キー入力で動くデモ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://webdesignmatome.com/webdesign/js_anim
