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

Update:

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

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

jQuery DrawSVG
Lightweight, simple to use jQuery plugin to animate SVG paths

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に変更することで解決します。下記リンク参照。

Uncaught TypeError: $ is not a function の解決方法
原因 直接的な原因としては以下のこのコードが存在するから。 なんでこんなものを使うのか？？ 色々なjavasc

先ほど力技で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の数値を置いてコードを作りました。

Paths
前のセクションで述べたとおり、path 要素は SVG の基本的な図形の中でもっとも強力な要素です。これは、(少なくともよく似ている) 他のすべての図形などを作成するために用いることができます。

メモ：スタート地点は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アニメーションが5分で作れる！jQuery DrawSVGの使い方 | stand-4U
SVGのパスをjavascriptを駆使して自分でアニメーションを作るのは至難の業だ。しかし、苦労せずとも簡単に１０分でいや、５分でSVGパスアニメーションができるプラグインが、今回使い方を説明する「jQuery DrawSVG」である。SVGファイルのHTMLへの設置の仕方や、SVGファイルの作り方・使い方も解説！

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

SVGのパスを手軽にアニメーションを実装できる！ jQuery DrawSVGのお話｜プラカン...
こんにちは、デザイナーのSUGIYAMAです。今回はSVGパスを手軽にアニメーションできるプラグイン「jQuery DrawSVG」を紹介します。[codepen_embed height=

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

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

SVG研究② | illustratorでアニメーション用SVG作成の試行錯誤メモ
上記記事で使用したSVGアニメーションのjQueryプラグイン「DrawSVG」ですが、これを使って動かす場合、SVGはpathで記述されている必要がありました。記事内の例ではアナログで置き換えましたが、そんなことやってられない＆複雑な形状ではお手上げです。やはりIllustratorで作成したい！その試行錯誤記録です。イラレでアニメーション用のSVGを作成するレッツ・トレース！SVGは座標座標で順に記述していくため、イラレで描く順番（方向）も重要になります。ここでは円・四角などの図形ツールは使用せずパスツールで記述していきます。...

関連記事: