2013年5月22日水曜日

SVGでコールバック関数を使用できるanimate関数


【SVGでコールバック関数を使用できるanimate関数】
SVGでアニメーションをjavascriptで操作する場合、animate要素や
animateTransform要素で動きを定義し、javascriptで動作開始を制御する。

しかし、javascriptを使う前提でanimate要素の機能を見ると少し物足りない。
下記のような要望があるはずだ。
・アニメーション終了後にcallback関数を呼び出したい
・アニメーションのフレーム数(fps)を設定したい

そこで、svg要素をアニメーション表現するjavascript関数を作成してみる。
方針はsetIntervalでsvg要素内の属性値を連続的に変化させるという方法です。
あらゆる要素に対して汎用的に使える処理を作るのは現実的ではないので、
以下1つの実装例を紹介する。

【cx,cyで位置が決定される要素の並行移動】
 →サンプル

  この関数の使い方
    moveEllipse(
        document.getElementById('ellipse1'),//アニメーションの対象となるsvg要素
        120,80,                                       //アニメーションの目的地となる座標
        3000,                                         //移動時間[mmsec]
        60,                                            //アニメーションフレーム数[fps]
        function(){                                  //↓コールバック関数
            document.getElementById('ellipse1').setAttribute("fill","yellow");
        }
    );

 細かいところはサンプルのソースコードを見てください。

0 件のコメント:

コメントを投稿