みなさんSVGしてますか？
前回SVGアニメーションについて書きましたが、今回はその延長でSnap.svgを使ったマウスオーバーアニメーションを作成してみたいと思います。

まずはこちらをご覧ください。
完成デモ ＞＞

タム君にマウスオーバーすると口の形が、笑顔のそれから叫ぶような形にスムーズに切り替わったかと思います。
アニメーションの途中でマウスを離してみると、間の形が見れたりするのもSVGならではの楽しいところです。
それでは早速作ってみましょう。

 

Snap.svgとは

「Snap.svg」とはJavaScriptでSVG要素を制御することができる、Adobeが開発したオープンソースライブラリです。（jQueryと同じように扱えるのも嬉しい！）

公式サイト
http://snapsvg.io/

 

素材を作成

最初にアニメーションさせたいものをSVG形式で用意しておきます。
イラストレーターなどで作成した素材（マウスオーバー前・後1つずつ）を「.svg」形式で保存しておいてください。※この時どんな形でもOKですが、パスの数だけは合わせておくようにしてください。

今回はタム君の口だけを動かそうと思うので下記のように素材を用意しました。

書き出したSVGを開いてみると d="M*****" という箇所があると思いますが、これが先ほど作った素材のパスになっています。後ほどこのパスが必要になってきますので、確認しておいてください。

 

実装

事前にjQueryとSnap.svgを読み込ませておいてください。
（Snap.svgは公式サイト右上の「Download」ボタンよりダウンロードできます）
http://snapsvg.io/

準備ができればコードを書いていきます。

HTML

<div class="demo">
    <svg class="btn"></svg>
</div>

<style type="text/css">
.demo {
    width: 260px;
    height: 260px;
}

.btn {
    height: 100%;
}
</style>

HTML側に＜svg＞タグを用意し、そこに先ほど用意した素材のSVGパスをいれ
アニメーションの設定もしていきます。

JS

    window.onload = function() {
        // Snapオブジェクトを作成しサイズも指定
        var snap_obj = Snap(260, 260).remove();

        // 塗りの指定
        var col = "#CF4C51";

        // 指定した要素を取得する
        var btn = document.querySelector(".btn");
        snap_obj.prependTo(btn);

        // アニメーション前のパス
        var path_start = 'M42.207,173.89c0,0,16.846,62.11,83.569,61.11C181.281,233.983,203,203.279,214,173.89c-2,18.444-13.947,61.11-88.224,65.61C69.5,237.5,45.414,205.279,42.207,173.89z';

        // アニメーション後のパス
        var path_end = 'M103.997,229.494c0,0-0.831-37.327,26.084-36.642C147.852,192.527,155,218.5,155,229.494c0,12.34-2.466,22.565-26.246,24.006C110.735,252.859,103,241.5,103.997,229.494z';

        // アニメーションの時間
        var duration =  250;

        // パスと色を設定
        var path_svg = snap_obj.path(path_start).attr({
            fill: col
        });
        var isdir = false;

        // マウスオーバー時、パスを変更してアニメーションさせる
        $(".demo").hover(function() {
            if (!isdir) {
                path_svg.animate({
                    path: path_end
                }, duration);
                isdir = true;
            } else {
                path_svg.animate({
                    path: path_start
                }, duration);
                isdir = false;
            }
        });
    }

※サイズや色、SVGのパス、アニメーション時間などは任意で変更してください。

以上で完成です。完成デモ ＞＞
※デモではマウスオーバー時の動きをCSSで追加しています。
※公式サイトによると「モダンブラウザに対応」とのことですが、Internet Explorer 9以上であれば動作するようです。

これを応用すれば個性的なナビゲーションを作成することもできますので、是非色々試してみてください！