HTML5 入 門 田 ClockMaker 子 Vol.16 2011/06/25 http://clockmaker.jp/ Twitter ID : clockmaker
Flash HTML CSS3 Animations Canvas + JavaScript CSS + JavaScript
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 )
requestanimationframe 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
requestanimationframe 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 <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>
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 Firefox3.x Safari4 IE9 Firefox4 Chrome Safari5 iphone ipad CSS + JavaScript Android CSS3 Animations Canvas+ JavaScript
IE6 IE7 IE8 Firefox3.x Safari4 IE9 Firefox4 Chrome Safari5 iphone ipad CSS + JavaScript Android CSS3 Animations Canvas+ JavaScript Flash
Thank you for your attention. http://clockmaker.jp/ Twitter ID : clockmaker ActionScript Beautifl Code 280 日 2011 6 月 8 日 田 Flash Android 入 門 320 日 2011 3 月 18 日 田,