LAB

SVGの描画アニメーション（vivus.js）

Written by EVOWORX

INDEX

説明

筆記体やラインアートなどのSVG画像のパスを、一つひとつの線が描いているようなアニメーションが作れます。

使用するライブラリ

vivus.js

公式サイト： https://maxwellito.github.io/vivus/

Github： https://github.com/maxwellito/vivus#vivusjs

手順

手順1

SVGの用意

  • 要素がStroke属性があることです。Fill属性は使わないです。 例：fill: "none"; stroke: "#FFF";
  • 隠れているパス要素、見えない要素をSVGに入っていないこと。Vivusは全部アニメーション可能と認識するので、望まないアニメーションが含まれることがあります。
  • テキストはパスに変換できないので使えません。

HTMLコードの準備

  • SVGタグにidを付けます
  • SVGのCSSスタイルを外部CSSに移します
  • circle, rect, line, polyline が入っているとアニメーションに問題が発生するので、pathformer.jsをVivus本体と一緒に読み込み、パスに変換します
  • ellipseとtext属性は変換できないのでSVG作成時パスに変換する必要があります
  • 下記のように、viewboxとpathを残してHTMLを整理します
<svg id="my-svg" viewBox="...">
 <path...>
 <path...>
 <path...>
</svg>

手順2

GitHubからライブラリをダウンロードし、</body>タグの直前で/dist配下にあるvivus.min.jsを読み込みます。

また、pathformerが必要な際は一緒に読み込みます。（※1）

コード

<script　src="js/vivus.js"　type="text/javascript"></script>
<script　src="js/pathformer.js"　type="text/javascript"></script>

CDNの場合は下記の一つを利用ください。

CDNjs

https://cdnjs.cloudflare.com/ajax/libs/vivus/0.3.2/vivus.js

jsDelivr CDN

https://cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js

npmの場合は、以下のコマンドをターミナルで実行してください。

コマンド(npm)

npm install vivus

手順3

jsファイルに下記のように実行します。

 new Vivus('mv-svg', {duration: 300}, callback);

３つのパラメータは：

  • SVG要素のid
  • アニメーションオプション
  • アニメーションの最後に呼び出される関数

アニメーションタイプ

delayed

各path間で少し間を開けて開始されます。これがデフォルトの設定です。

async

線の長さが違っても線描画の開始・終了をより明確に同時になります。

oneByOne

各pathが順番に描画されます。

scenario

各パスをdata属性のdata-start（開始時間）とdata-duration（アニメーションの長さ）でアニメーションを指定できます。

Scenarioは上の３つのタイプより作るのに時間がかかりますが、順番関係なく自由に調整でき、一番柔軟性があります。

data属性を与えない場合はデフォルトになります。

<svg>
  　　<path data-start="0" data-duration="10" ... />
  　　<path data-start="20" data-duration="10" ... />
  　　<path data-start="20" data-duration="20" ... />
  　　<path data-start="0" data-duration="30" ... />
</svg>

scenario-sync

scenario-syncはデフォルトでoneByOneと同じですが、data-delay、data-duration、data-asyncを使ってアニメーションをカスタマイズできます。

data-delay：フレームにおける一つ前のパスのアニメーション終了と現在のパスのアニメーションが開始するまでの時間

data-duration：フレームにおける、現在パスアニメーションの長さ

data-async：次のパスが同時に開始します

オプション

type

アニメーションのタイプを指定します

delayed, async, oneByOne, scenario, scenario-sync, script

start

‘autostart’ 自動で開始します, ‘manual’ 手動で.play()などのメソッドを読んで開始します

delay

type: delayedを設定した場合、各パスの間時間の長さを指定します

duration

アニメーションの長さ

サンプル

Vivus.jsを使ったSVGアニメーションのサンプルです。

参考文献

PICK UP