SVGアニメーション
Adobeさんより、SVGライブラリが出ましたので、ちょっと試してみました♪
サンプルはこちら
※更新ボタンクリックでランダムに円が配置されます。
スマフォのChromeでも普通に再生されるからいいのかなあっと。
あとはCanvasと比べて、負荷がどうなるのかも気になるところです。
現状、一番高速なのはWebGLだと思います。
ソースコードはこちら
<!DOCTYPE html> <html> <head> <title></title> <script src="lib/snap.svg-min.js"></script> <script> window.onload = function () { //マイランダム関数 var random = {}; //最小値・最大値のランダム整数取得 random.getNumber = function( minInt , maxInt ){ return Math.floor( Math.random() * ( maxInt - minInt + 1 ) ) + minInt; }; //ランダムカラー取得 random.getColor = function(){ return Math.floor(Math.random() * 0xFFFFFF).toString(16); }; //メイン var main = {}; //メイン初期化 main.init = function(){ //キャンバス作成 var s = Snap(800,800); //ランダムで１０個の円を作成 for( var i = 0 ; i < 10 ; i ++ ){ //ｘ・ｙ座標をランダム作成 var nRandomIntX = random.getNumber( 1 , 800 ); var nRandomIntY = random.getNumber( 1 , 800 ); //円の作成 var bigCircle = s.circle( nRandomIntX, nRandomIntY, 0 ); //円の要素設定 bigCircle.attr({ fill:"#" + random.getColor(), stroke:"#" + random.getColor(), strokeWidth:5 }); //円のアニメーション設定 bigCircle.animate({ r: random.getNumber( 0 , 100 ), stroke:"#" + random.getColor(), fill:"#" + random.getColor() } ,random.getNumber( 1000 , 3000 ) ,mina.bounce ); } }; //メインスタート main.init(); } </script> </head> <body> </body> </html>
