【jQuery DrawSVG】を使用してSVGアニメーションを実装してみた

2020-04-14

SVGについてまとめは

Redirecting to: https://hibi-update.org/blog/svg/

今回はSVGアニメーションの実装をやってみたいと思います。

SVG画像をアニメーション用に変換する

前回作成したSVG画像のHTMLコードが以下になります。

<div class="img_item">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="290.77"
    height="417.99"
    viewBox="0 0 290.77 417.99"
  >
    <g id="sample01" data-name="sample01">
      <g id="pen">
        <path
          class="pen pen01_01"
          d="M136.121,10.107V172.286S112.47,177.918,112.47,211.7s33.652,33.787,33.652,33.787,37.864,5.068,37.864-33.224-29.846-40.544-29.846-40.544V10.107L286.473,213.394s-24.214,12.951-45.612,51.243S203.7,347.979,203.7,347.979H87.129S70.236,289.416,49.4,261.259,3.788,204.948,3.788,204.948Z"
        />
        <polygon
          class="pen pen01_02"
          points="213.831 347.979 213.831 391.339 98.392 391.339 83.751 391.339 83.751 347.979 213.831 347.979"
        />
        <polygon
          class="pen pen01_03"
          points="97.828 414.99 198.627 414.99 198.627 391.339 98.392 391.339 97.828 414.99"
        />
      </g>
    </g>
  </svg>
</div>

今回注目していただきたいのが「path」「polygon」タグです。サンプル画像では、以下のような状態になっています。

ここでポイントなのがSVGアニメーションをさせることができるのは「path」のみです。

そのため、「polygon」タグを「path」に変換する必要があります。

plygonタグをpathタグに変換する

polygonタグ

<polygon
  class="pen pen01_02"
  points="213.831 347.979 213.831 391.339 98.392 391.339 83.751 391.339 83.751 347.979 213.831 347.979"
/>
<polygon
  class="pen pen01_03"
  points="97.828 414.99 198.627 414.99 198.627 391.339 98.392 391.339 97.828 414.99"
/>

変換した箇所

polygon → path
points= → d=
d=“の先頭にMをつける。最後にZをつける。

pathタグに変換後

<path
  class="pen pen01_01"
  d="M136.121,10.107V172.286S112.47,177.918,112.47,211.7s33.652,33.787,33.652,33.787,37.864,5.068,37.864-33.224-29.846-40.544-29.846-40.544V10.107L286.473,213.394s-24.214,12.951-45.612,51.243S203.7,347.979,203.7,347.979H87.129S70.236,289.416,49.4,261.259,3.788,204.948,3.788,204.948Z"
/>
<path
  class="pen pen01_02"
  d="M213.831 347.979 213.831 391.339 98.392 391.339 83.751 391.339 83.751 347.979 213.831 347.979Z"
/>
<path
  class="pen pen01_03"
  d="M97.828 414.99 198.627 414.99 198.627 391.339 98.392 391.339 97.828 414.99Z"
/>

これでSVG画像をアニメーション用に変換できました。次に、アニメーションをさせるプラグインをインストールします。

【jQuery DrawSVG】のインストール

SVGアニメーション用のプラグインに今回は【jQuery DrawSVG】を使用してみます。

leocs.me

jQuery DrawSVG

Lightweight, simple to use jQuery plugin to animate SVG paths

jQuery DrawSVGを使用する時はjQueryも読み込ませましょう。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/jquery.drawsvg.min.js"></script>

SVGアニメーションを実装する

アニメーションを指定するため、svgタグにidをつけます。

<div class="img_item">
  <svg
    id="svg01"
    xmlns="http://www.w3.org/2000/svg"
    width="290.77"
    height="417.99"
    viewBox="0 0 290.77 417.99"
  >
    <g id="レイヤー_2" data-name="レイヤー 2">
      <g id="pen">
        <path
          class="pen pen01_01"
          d="M136.121,10.107V172.286S112.47,177.918,112.47,211.7s33.652,33.787,33.652,33.787,37.864,5.068,37.864-33.224-29.846-40.544-29.846-40.544V10.107L286.473,213.394s-24.214,12.951-45.612,51.243S203.7,347.979,203.7,347.979H87.129S70.236,289.416,49.4,261.259,3.788,204.948,3.788,204.948Z"
        />
        <path
          class="pen pen01_02"
          d="M213.831 347.979 213.831 391.339 98.392 391.339 83.751 391.339 83.751 347.979 213.831 347.979Z"
        />
        <path
          class="pen pen01_03"
          d="M97.828 414.99 198.627 414.99 198.627 391.339 98.392 391.339 97.828 414.99Z"
        />
      </g>
    </g>
  </svg>
</div>

jsファイルに以下のコードを書きます。

$(function () {
  var svg_anime = $("#svg01").drawsvg();
  svg_anime.drawsvg("animate");
});

これでSVGをアニメーションすることができました。次に【jQuery DrawSVG】のオプションをみていきます。

オプション	タイプ	デフォルト	説明
duration	Integer	1000	各パスのアニメーション時間
stagger	Integer	200	各パスのアニメーションスタートまでの時間
easing	String	swing	イージング
reverse	Boolean	false	パスの描画する方向
callback	Function	function()	アニメーション完了後に呼び出す関数