2013年5月22日水曜日

SVGにおけるpath要素の変形アニメーション

【SVGにおけるpath要素の変形アニメーション】
 前記事の延長でパスで描画された三角形の変形アニメーションを作ってみた。

 →さっそくサンプル
 この関数の使い方
    movetriangle(
        document.getElementById('triangle1'),  //アニメーションの対象となるsvg要素
        {point1:{x:12, y:31}, point2:{x:46, y:121}, point3:{x:200, y:50}},//変形後の各頂点座標をオブジェクトリテラルで指示
        3000,                                            //移動時間[mmsec]
        60,                                               //アニメーションフレーム数[fps]
        function(){                                     //↓コールバック関数
            document.getElementById('triangle1').setAttribute("fill","yellow");
        }
    );

0 件のコメント:

コメントを投稿