IE対応のSVGアニメーション その① | jQueryプラグイン DrawSVGを使って実装してみた

憧れのSVGアニメーションをマスターしたい! しかもIE対応の! 調べたらjquery.drawsvg.jsvivus.jsを使えばIEでも問題なく実装できるっぽい。
というわけで、今回はjquery.drawsvg.jsを使ってSVGアニメーション実装までのメモです。スタート!

jQueryプラグイン DrawSVGを用意します


jQueryはすでに手元にあるものと仮定して進めます。
上記サイトからjquery.drawsvg.jsを持ってきて、適所に格納します。

アニメーション用のSVGを用意します

Adobe Illustratorもあるものと仮定して進めます。
今回はデモ用に四角と螺旋を作ってみました。

sample01.四角

sample02.螺旋

ここでは便宜上PNGを貼っていますが、SVGアニメーションで必要なのはimgタグで貼り付けるSVGファイルではなく、SVGコードの方です。

SVGファイルをテキストエディターで開くか、Illustratorでファイル>別名で保存...からファイル形式:SVG(svg)として保存をクリックします。

イラレのウインドウ

上記SVGオプションのウインドウになるので下のSVRコード…ボタンをクリックすると、SVGコードが表示されます。

必要なのは<svg>内になります。sample01.四角のSVGコードはこうなりました。

<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
  <style type="text/css">
    .st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
  </style>
  <g>
    <polyline class="st0" points="5,4.5 394.5,4.5 394.5,394.5 4.5,394.5 4.5,4.5 	"/>
  </g>
</svg>

id="レイヤー_1"と日本語が入ってるのが気に入らないので、ここはid="sample01"に変更しました。

pathタグとpolyline要素

まだ勉強中で不確定なのですが、SVGアニメーションを実装できるのはpathタグだけのようです。polyline要素で吐き出されたものはアニメーションが効かないので、今回は自力でpathタグに書き換えます。
(どうやらイラレでパスのアウトラインを取ってからSVG書き出しをすると、polylineではなくpathになるようです。pathという名前に釣られてパスのまま保存するとダメなんですね……)

というわけで、pathタグに書き換えた四角のSVGコードがこちら。

<svg version="1.1" id="sample01" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
  <style type="text/css">
    .st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
  </style>
  <g>
    <path class="st0" d="M5 4.5L394.5 4.5 394.5 394.5 4.5 394.5 4.5 4.5z"/>
  </g>
</svg>

実装

jQueryとjquery.drawsvg.jsは普通に<head>なり</body>の直前なりにリンクを記述します。

scriptの記述を追加する

<script>
  var mySVG = $('#sample01, #sample02').drawsvg();
  mySVG.drawsvg('animate');
</script>

SVGのid、classに合わせて調整してください。
</body>直前に配置します。

色んなjsを動かしているサイトの場合、複数で使用されている$が干渉し合ってjsが動かないことがあります。その場合は、$を全てjQueryに変更することで解決します。下記リンク参照。


先ほど力技でpathに直したSVGのコードは、HTMLの配置したい場所にコピペで流し込みます。
jquery.drawsvg.jsではimgタグで配置した場合にはアニメーションさせられません。

SVGアニメーションのデモページ

細かい調整をしていく

公式サイトにもOPTIONSとしての掲載されているのですが、説明の箇所を日本語に直します。

オプション名 タイプ デフォルト値 説明
duration Integer 1000 各パスのアニメーションが完了するまでの時間。
stagger Integer 200 各パスのアニメーションの開始を遅らせます。
easing String swing 各パスが遷移に使用するイージング関数。
jQuery Easingプラグインを使用して様々なイージング機能を実装します。
reverse Boolean false 線が描画される方向。
callback Function function() {} アニメーションが完了したら呼び出す関数。

今回は、試しに少し間をとってアニメーションが開始し(stagger)、アニメーション自体もゆっくりにし(duration)、アニメーション完了後に消える(callback/fadeOut)ようにしてみます。
消えるとSVGがあった部分が上に詰まるので、気になる場合は親要素に高さを指定するなどします。

<script>
  var mySVG01 = $('#sample03, #sample04').drawsvg({
  duration:2000, 
  stagger:500,
  easing:'swing',
  reverse:false,
  callback: function() {
     $('#sample03, #sample04').fadeOut(2500);
    }
  });
  mySVG01.drawsvg('animate');
</script>
ちょっと調整したデモ

テキストだとどうなるか?

Illustratorでフォントのアウトラインを取ってSVGにすると、勝手にpathになってくれます。
(SVGコードのpathがとても長くなったため、ここでは省略します)

テキストのデモ

イラレで複雑な図形でやってみる(一筆書き)

ここでは街の輪郭っぽい図形を使用します。ペンツールでポチポチ書いた図形をそのままsvg書き出しするとpolylineになってしまいますが、「パスのアウトライン」をすることでpathになってくれます。

アウトラインでpath化のデモ

輪郭をなぞって一周してしまいました。そうじゃなく普通の一筆書きぽくなってほしいのですが……。

SVG(polyline)を気合いでpathに書き変えたもの

オープンパスだとpolylineになってしまう、パスのアウトラインを取ると外枠ぐるっとなってしまう。
仕方ないので下記サイトを参考にして、力技で自分でpathの数値を置いてコードを作りました。

メモ:スタート地点はM(x座標とy座標双方の座標指定)、水平移動がH(x座標のみ座標指定)、垂直移動がV(y座標のみ座標指定)、斜め移動はL(x座標とy座標双方の座標指定)、最終的に最初の点に戻らせたい場合は末尾にZ(戻らせない場合は無し)

アウトラインでpath化のデモ

そうそう、こういう一筆書きを実装したかったのです。って、イラレでこうなるデータを書き出すにはどうしたらいいのか。。勉強します。

複数のパスがある場合のアニメーション

複数のパスがある場合はどうなるか?
デフォルトでduration(各パスのアニメーションが完了するまでの時間)が「1000」、stagger(アニメーションの開始の遅延時間)が「200」なので、最初のパスのアニメーション中に次のパスがどんどん順繰りにスタートしていきます。

パス一本一本、それぞれのアニメーションが終わってから次のパスのアニメーションをスタートさせたい場合は、durationとstaggerの値を同じにします。

<script>
  var mySVG0602 = $('#sample0602').drawsvg({
    duration:600,
    stagger:600,
  });
  mySVG0602.drawsvg('animate');
</script>

逆に、全部のパスのアニメーションを一斉にスタートさせたい場合はstaggerの値を「0」にします。

デモでは、デフォルトと1本ごとのアニメーションを用意しました。

複数のパスがある場合のデモ

スクロールで制御する(参考サイト)

このSVGアニメーションはページ読み込みと同時に開始されます。そのため、ページ上部に配置していない限り、訪問者がせっかくのアニメーションを目にしないことも考えられます。
そんなときの参考サイトです。

スクロールしてこのSVGが配置されたエリアにきたらアニメーションがスタートしてほしい。

SVGをposition: fix;で固定しておいて、ページスクロールにしたがってアニメーションが進行してほしい。

202101追記:イラレでpathの記述にする

記事内で試行錯誤していたアニメーションSVG用にイラレでpathの記述にする方法ですが、以下の記事で手探り研究しています。