HTML5 アニメーション Ë E -...

©2011 ClockMaker (http://clockmaker.jp). All rights reserved.

HTML5 アニメーション⼊入⾨門池⽥田泰延 | ClockMaker

東京てら⼦子Vol.16 | 2011/06/25

http://clockmaker.jp/ Twitter ID : clockmaker


Flash要らず HTMLでアニメーション

CSS + JavaScript

Canvas + JavaScript

CSS3 Animations


Flash要らず HTMLでアニメーションメリットデメリット

CSS3 Animations iPhone/iPadで⾼高速描画対応していないブラウザが多い(例：Androidの標準ブラウザ)

Canvas +JavaScript

⾃自由に描画ができる・表現⼒力力が⾼高い

マシンのパフォーマンスに依存(モバイルではほとんど速度がでない) マウスイベントの扱いが難しい

CSS +JavaScript

レガシーなブラウザでも動作 DOMに対してイベントハンドリングできる

マシンのパフォーマンスに依存


Flashでの描画更新

•  Flashではエンターフレームという概念がある

•  フレームが進むごとに描画される

•  最⼤大60fpsで描画更新が可能


HTMLでの描画更新

•  JavaScriptではフレームという概念がない •  JavaScriptのsetInterval()を実⾏行行して描画更新を⾏行行う

•  描画更新の対象にDOMやCanvasを使える•  ブラウザ毎に更新周期の上限が違うが

Flashより⾼高い描画更新頻度を処理できる


setInterval(loop, 16); // 16msec = 60fps function loop (){ // refresh view

}


setIntevalのデメリット

•  iOS/Androidでは全く速度がでない (10fpsが上限？)

•  ⾮非アクティブ時も実⾏行行され続ける (Flash Playerでは⾮非アクティブ時にはfpsを⾃自動的に落とし、バッテリー消費量の削減を図る)


Canvas vs Flash Player

•  http://www.youtube.com/watch?v=nBkLfgDueyw


HTML5

•  requestAnimationFrame というsetIntervalに変わる仕様

•  現時点(11/6/25)で実装されているのは Firefox5とChrome14のみ


requestAnimationFrame

•  複数の描写処理を⼀一つにまとめて最適化 – 描画処理が⼀一箇所にまとめるため、複数のオブジェクトのモーションが次第にずれていくとかがなくなる

– CSS transitionsやSVG SMIL(SMIL Animation)と同期がとれる

•  不要な場合に処理を⾏行行わない – ブラウザのタブが裏に回って⾮非表⽰示になってるとときは処理しない (Flash Playerと同じ挙動)



loop(); function loop (){ // refresh view

// webkit if (window.webkitRequestAnimationFrame window.webkitRequestAnimationFrame(loop); } // Firefox else if (window.mozRequestAnimationFrame) { window.mozRequestAnimationFrame(loop); }

}


DEMO

•  http://d.hatena.ne.jp/uupaa/20110622/1308713373



•  参考記事 – パーティクル3万個 - latest blog

http://d.hatena.ne.jp/uupaa/20110622/1308713373

– requestAnimationFrame ＜よーしおまえらー、アニメーションにsetInterval使うなよー http://d.hatena.ne.jp/calpo/20110523/p1


CSS3

•  CSS3を使うとiOSでは、GPUで処理される(と⾔言われている)ため、⾮非常に軽快に動作

•  iOS向けに最適化する場合に利⽤用 •  ただし複雑な(例：アニメーションが多数、⼊入れ⼦子構造)ものはバグが発⽣生するため注意が必要


-webkit-transform

•  移動アニメーションについて、 -webkit-transform-translateを使う場合は、 -webkit-transform-translate3dを利⽤用

•  本来は3D(Z座標)を使うためのものだが、z=0を指定して2Dとして利⽤用する

•  GPUによる⾼高速化が有効になる


CSS3 Animations Code

.motionA { -webkit-transform:translate3d(480px, 0px, 0px); -webkit-transition-duration:2.0s; -webkit-transition-timing-function:ease-out; }

$("#btn").click(function(){ // start animation at click event $("#box").addClass("motionA"); });


DEMO

•  http://dl.dropbox.com/u/268240/zudologFiles/transformSpeedDiff/500_index.html


CSS3 Animations ライブラリ

•  TransformAnimator CSS3のtransitionのアニメーションをJSから制御できるライブラリ http://zudolab.net/blog/?p=338

•  iScroll iOS(iPhone/iPad)でスクロールバーを実装するためのライブラリ。スクロールの処理にwebkitTransformを使っている http://cubiq.org/iscroll


ブラウザ対応

IE6 IE7 IE8

Firefox4~ Chrome Safari5~

iPhone iPad

AndroidCSS + JavaScript

CSS3 Animations

Canvas+ JavaScript

Firefox3.x Safari4 IE9


ブラウザ対応

IE6 IE7 IE8

Firefox4~ Chrome Safari5~

iPhone iPad

AndroidCSS + JavaScript

CSS3 Animations

Canvas+ JavaScript

Flash

Firefox3.x Safari4 IE9


ActionScript Beautifl Code ページ数：280ページ出版社：ワークスコーポレーション発売⽇日： 2011年6⽉月8⽇日著者：池⽥田泰延

http://clockmaker.jp/

ご清聴ありがとうございました。 Thank you for your attention.

Flash ではじめる Android アプリ開発⼊入⾨門ページ数：320ページ出版社：技術評論社発売⽇日： 2011年3⽉月18⽇日著者：池⽥田泰延, 古堅真彦

Twitter ID : clockmaker

HTML5 アニメーション Ë E -...

Documents

Transcript of HTML5 アニメーション Ë E -...