LAB 2021.12.20

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

Written by jacqueline

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>