スタートページ＞ Javascript＞ SVG

Snap.svg 概要　アニメーション（仕掛中）

Snap.svg とは

Snap.svg は、SVG を扱う JavaScript のライブラリの一つで、特にベクター図形のアニメーション作成に広く用いられています。
　SVG が扱う図形は、単純にいえば、２点間を結ぶ直線を基本にしています。各直線について前の状態と後の状態が与えられているとします。短時間当たりの微小変化を計算して表示すれば、前の図形が後の図形に滑らかに変化するように見えます。Snap.svg は、そのプロセスを簡単に記述できる関数を提供しています。

Snap.svg を用いるには、
　CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg.js"></script>
を記述するだけです。

Element.animate


単純な例として、左上の長方形を位置と形状を変化させて右下の円に変化させます。

　　               x   y   width height rx ry
　　前図形（左上）  0   0   100   100    0  0
　　後図形（右下）150  80    50    50   25 25

ソースコード

function Rect1() {
    var svg = Snap('#svgRect');
    svg.clear();
    var 図形 = svg.rect();    // 図形が rect であること宣言

    var 変化時間 = 3000;
    var 打切時間 = 3000;
    function anim(){
        図形.attr(
            {x:0, y:0, width:100,height:100, rx:0,  ry:0,  fill:"aqua", stroke:"blue"}); // 前図形
        図形.animate(
            {x:150, y:80, width:50,height:50,  rx:25, ry:25 },    // 後図形
            変化時間,            // 初期状態→最終状態のサイクル時間
            function(){
                anim();
            }
        );
        setTimeout(function(){図形.stop()},打切時間);
    };
    anim();
}

アニメーションは、次の形式で記述します。
　　function anim() {
　　　　{図形.attr[前図形], 図形.animate([後図形], 変化時間, イージング);
　　};
変化の方法では、コールバック関数で、自分自身 anim() を再帰呼び出しして、アニメーションを継続させます。
後図形は前図形から変化する属性だけを記述します。ところが、色(fill)や回転などの属性を与えると、エラーになってしまいます。私にはその原因がわかりません。


Path図形の変形（モーフィング）


最も一般的なのは、図形を直線のつながりとして表現する（path図形）にすることでしょう。
この場合は、path の d 属性を配列として与えるのが通常です。
そして、前図形の直線と後図形の直線が１：１の対応をしている必要があります。

そのため、図形の定義は面倒になりますが、アニメーションの記述は、下のように単純になります。

function Path1() {
    var svg = Snap('#svgPath1'); // Snap.svgを定義
    svg.clear();

    // 前後図形のパス
    var 前図形 = "M  30  30  L 120 30  V 120  H 30  Z";
    var 後図形 = "M 100 100  L 120 30  V 120  H 30  Z";

    // 初期状態
    var 図形 = svg.path(前図形).attr({stroke: "blue", strokeWidth:4, fill: 'aqua'});
    // 変化
    var 変化時間 = 1000; // アニメーション時間
    var イージング = mina.easein; // Snap.svgで定義されているイージング関数

    図形.animate({path: 後図形}, 変化時間, イージング); // 前図形→後図形
}

クリックによるアニメーションの操作


画面をマウスクリックすれば後図形になり、再度クリックすれば前図形に戻ります。
このような操作はよく用いられますが、コードは下の後半を追加するだけです。

function Path2() {

    var svg = Snap('#svgPath2'); // Snap.svgを定義
    svg.clear();
    // 前後図形のパス
    var 前図形 = "M  30  30  L 120 30  V 120  H 30  Z";
    var 後図形 = "M 100 100  L 120 30  V 120  H 30  Z";
    // 初期状態
    var 図形 = svg.path(前図形).attr({stroke: "blue", strokeWidth:4, fill: 'aqua'});
    var 変化時間 = 1000; // アニメーション時間
    var イージング = mina.easein; // Snap.svgで定義されているイージング関数

    var クリック = false;  // クリックの状態　false クリック
    svg.click(function () {
        if (!クリック) {
            図形.animate({path: 後図形}, 変化時間, イージング); // 前図形→後図形
            クリック = true;   // クリック状態にする
        }
        else {
            図形.animate({path: 前図形}, 変化時間, イージング); // 後図形→前図形
            クリック = false;  // クリック状態解消
        }
    });
}