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

HTML5 アニメーション⼊入⾨門
池⽥田泰延 | ClockMaker
http://clockmaker.jp/©2011 ClockMaker (http://clockmaker.jp). All rights reserved.

Twitter ID : clockmakerFlash要らず HTMLでアニメーション

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

Canvas+ JavaScript

CSS+ JavaScript

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

デメリット

CSS3 Animations

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

Canvas+JavaScript

⾃自由に描画ができる・表 マシンのパフォーマンス
現⼒力力が⾼高いに依存(モバイルではほとんど速度がでない)
マウスイベントの扱いが難しい

CSS+JavaScript

レガシーなブラウザでも マシンのパフォーマンス
動作に依存
DOMに対してイベントハンドリングできる©2011 ClockMaker (http://clockmaker.jp). All rights reserved.

Flashでの描画更新• Flashではエンターフレームという概念がある• フレームが進むごとに描画される• 最⼤大60fpsで描画更新が可能©2011 ClockMaker (http://clockmaker.jp). All rights reserved.

HTMLでの描画更新• JavaScriptではフレームという概念がない• JavaScriptのsetInterval()を実⾏行行して描画更新を⾏行行う• 描画更新の対象にDOMやCanvasを使える• ブラウザ毎に更新周期の上限が違うがFlashより⾼高い描画更新頻度を処理できる©2011 ClockMaker (http://clockmaker.jp). All rights reserved.

setInterval(loop, 16); // 16msec = 60fps
function loop (){// refresh view}©2011 ClockMaker (http://clockmaker.jp). All rights reserved.

setIntevalのデメリット• iOS/Androidでは全く速度がでない(10fpsが上限？)• ⾮非アクティブ時も実⾏行行され続ける(Flash Playerでは⾮非アクティブ時にはfpsを⾃自動的に落とし、バッテリー消費量の削減を図る)©2011 ClockMaker (http://clockmaker.jp). All rights reserved.

Canvas vs Flash Player• http://www.youtube.com/watch?
v=nBkLfgDueyw©2011 ClockMaker (http://clockmaker.jp). All rights reserved.

HTML5• requestAnimationFrame というsetIntervalに変わる仕様• 現時点(11/6/25)で実装されているのはFirefox5とChrome14のみ©2011 ClockMaker (http://clockmaker.jp). All rights reserved.

requestAnimationFrame• 複数の描写処理を⼀一つにまとめて最適化– 描画処理が⼀一箇所にまとめるため、複数のオブジェクトのモーションが次第にずれていくとかがなくなる– CSS transitionsやSVG SMIL(SMILAnimation)と同期がとれる• 不要な場合に処理を⾏行行わない– ブラウザのタブが裏に回って⾮非表⽰示になってるとときは処理しない(Flash Playerと同じ挙動)©2011 ClockMaker (http://clockmaker.jp). All rights reserved.

requestAnimationFrameloop();
function loop (){// refresh view// webkit
if (window.webkitRequestAnimationFrame
window.webkitRequestAnimationFrame(loop);}// Firefox
else if (window.mozRequestAnimationFrame) {window.mozRequestAnimationFrame(loop);}}©2011 ClockMaker (http://clockmaker.jp). All rights reserved.

DEMO• http://d.hatena.ne.jp/uupaa/20110622/1308713373©2011 ClockMaker (http://clockmaker.jp). All rights reserved.

requestAnimationFrame• 参考記事– パーティクル3万個 - latest blog
http://d.hatena.ne.jp/uupaa/20110622/1308713373– requestAnimationFrame ＜ よーしおまえ
らー、アニメーションにsetInterval使うな
よー
http://d.hatena.ne.jp/calpo/20110523/p1©2011 ClockMaker (http://clockmaker.jp). All rights reserved.

CSS3• CSS3を使うとiOSでは、GPUで処理される(と⾔言われている)ため、⾮非常に軽快に動作• iOS向けに最適化する場合に利⽤用• ただし複雑な(例：アニメーションが多数、⼊入れ⼦子構造)ものはバグが発⽣生するため注意が必要©2011 ClockMaker (http://clockmaker.jp). All rights reserved.

-webkit-transform• 移動アニメーションについて、-webkit-transform-translateを使う場合は、-webkit-transform-translate3dを利⽤用• 本来は3D(Z座標)を使うためのものだが、z=0を指定して2Dとして利⽤用する• GPUによる⾼高速化が有効になる©2011 ClockMaker (http://clockmaker.jp). All rights reserved.

CSS3 Animations Code<style type="text/css">.motionA {-webkit-transform:translate3d(480px, 0px, 0px);-webkit-transition-duration:2.0s;-webkit-transition-timing-function:ease-out;}</style><script type="text/javascript" >$("#btn").click(function(){// start animation at click event$("#box").addClass("motionA");});</script>©2011 ClockMaker (http://clockmaker.jp). All rights reserved.

DEMO• http://dl.dropbox.com/u/268240/
zudologFiles/transformSpeedDiff/
500_index.html©2011 ClockMaker (http://clockmaker.jp). All rights reserved.

CSS3 Animations ライブラリ• TransformAnimator
CSS3のtransitionのアニメーションをJSから制御できるライブラリ
http://zudolab.net/blog/?p=338• iScrolliOS(iPhone/iPad)でスクロールバーを実装するためのライブラリ。スクロールの処理にwebkitTransformを使っている
http://cubiq.org/iscroll©2011 ClockMaker (http://clockmaker.jp). All rights reserved.

ブラウザ対応
IE6
IE7
IE8

Firefox3.x
Safari4
IE9Firefox4~
ChromeSafari5~

iPhoneiPad
Android

CSS + JavaScript

CSS3 Animations
Canvas+ JavaScript©2011 ClockMaker (http://clockmaker.jp). All rights reserved.

ブラウザ対応
IE6
IE7
IE8

Firefox3.x
Safari4
IE9

Firefox4~
ChromeSafari5~

iPhoneiPad
Android

CSS + JavaScript

CSS3 Animations
Canvas+ JavaScriptFlash©2011 ClockMaker (http://clockmaker.jp). All rights reserved.

ご清聴ありがとうございました。
Thank you for your attention.
http://clockmaker.jp/
Twitter ID : clockmaker

ActionScript Beautifl Code
ページ数：280ページ
出版社： ワークスコーポレーション
発売⽇日： 2011年6⽉月8⽇日
著者：池⽥田泰延
Flash ではじめる Android アプリ開発⼊入⾨門
ページ数：320ページ
出版社： 技術評論社
発売⽇日： 2011年3⽉月18⽇日
著者：池⽥田泰延, 古堅真彦
©2011 ClockMaker (http://clockmaker.jp). All rights reserved.