Snap.svgを使ったSVGアニメーションの実装

はじめに

Snap.svgというadobeが提供するsvgアニメーションを制御するライブラリについて、なかなか使う機会がなく、「記事にするのもなぁ」と思っていたのですが、今回弊社のホームページを作り変えるにあたって使ってみたので、忘備録としてTipsを残しておきます。

そもそもSnap.svgって何？

完結にまとめると、『SVG（Scalable Vector Graphics）のDOMをJavascriptで操るためのライブラリ』です。
SVGの特徴としてよく語られるのは、「ベクター画像である」ということ。おかげでRetinaディスプレイなどでも細やかな表現ができるということで多様されるようになりましたが、「その構造がDOMで構成される」というのも大きな特徴です。
このライブラリを使うことでjQueryを使う感覚でSVG画像をインタラクティブなコンテンツへと昇華して、一味違った実装を可能にしてくれます。

実際の挙動を見てみよう

最初にゴールとして簡単な実装例を

見ての通り、弊社PNRA, INC.のロゴマークへマウスオーバーするとロゴが変形し、バンダナを巻いたヒグマへと変形します。

このようにSVGで構成された要素を別の要素へと切り替えることで今回のような造形の変化から動作、またもっと深くまで設計すれば、一連のアニメーションなども実装することができます。

より詳しく、且つどんなことができるのか気になった方は公式ページをご覧ください。

Snap.svg

実装手順

それでは、ここから実際の実装手順について見ていきたいと思います。
用意するのは、「jQuey」「snap.svg」そして「任意のSVGファイル」の３つだけです。

まずは、head内に必要なライブラリを設置し、body内にHTMLファイルにSVGを表示させる範囲を指定しましょう。

//head内にライブラリを読み込ませる

 <head>

  <script src="../js/jquery-1.11.1.min.js"></script>

  <script src="../js/snap.svg-min.js"></script>

  //SVGの表示範囲を60px*60pxに設定

  <style>

   .snaplogo { width:60px; height:60px; }

  </style>

 </head>

 //body内にSVGファイルの表示箇所を指定

 <body>

  <div class="snapLogo"></div>

 </body>

上記で最初の準備は完了です。
続けて、javascript側でsvgの記述と変化の指示を記述して要素を表示・動かしてみよう。

//snap.svg

<script>

var snap_obj = Snap(60, 60).remove();

var col = "#000";

var btn = document.querySelector(".snapLogo");

      snap_obj.prependTo(btn);

var path_start = '/*ここに変化前のd="の内容が入ります。"*/';

var path_end = '/*ここに変化後のd="の内容が入ります。"*/';

var duration =  250;

var path_svg = snap_obj.path(path_start).attr({ fill: col });

var isdir = false;

    $(".snapLogo").hover(function() {

        if (!isdir) {

            path_svg.animate({

                path: path_end

            }, duration);

            isdir = true;

        } else {

            path_svg.animate({

                path: path_start

            }, duration);

            isdir = false;

        }

    });

</script>

上述の「var path_start」は変化前のSVGパスの指示を。「var path_end」は変化後のSVGパスの指示をしています。SVGファイルをコードエディターなどで開くと「path d=”M~~~”」といった記述がありますので、ダブルクオーテーションで囲まれた範囲をコピー&ペーストしてください。

これで基本的な実装は全て完了です。