読者です 読者をやめる 読者になる 読者になる

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);
        //ランダムで10個の円を作成
        for( var i = 0 ; i < 10 ; i ++ ){
          //x・y座標をランダム作成
          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>

参考リンク

Snap.svg - Home