CREATOR BLOG

vivus.jsで簡単SVGドローアニメ その1

Line draw animation with Vivue.js

SVGアニメーション

SVGアニメーションを作る場合は、CSS3 のプロパティのfillやstroke-dasharray、stroke-dashoffsetを利用したり、transformで変形させる方法。JavaScriptを使う方方法。Adobe Animate、AffterEffectを使う方法など手段は様々です。

よく見かける、ラインを描いていくアニメーション実現する場合も上記の方法で可能です。
JavaScriptの場合、良いライブラリーがあるので、それを使うことでわりと簡単に実現できます。

有名な所ではVivue.jsで簡単にライン描画アニメーションを作ることができます。
http://maxwellito.github.io/vivus/

サンプルとして以下のようなアイコンをアニメーションさせる方法のメモとなります。

See the Pen
Vivus.js DEMO 2019.05.26 no.2
by Norihiko Takami (@sonic_cat)
on CodePen.

Vivusライブラリの読み込み設定

まずは、ライブラリーを読み込みます。

<script src="https://cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js"></script>

これだけでOKです。

SVGファイルの作成

次にSVGを用意します。
Illusratorなどでイラストを作成し、保存の際にSVGファイルを選択し保存します。

テキストエディタで保存したファイルを開くと以下のようなタグが書かれているかと思います。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator...-->
<svg ...>
<style>
~...
</style>
<path ...>
<path ...>
<g>
  <path ...>
  <path ...>
</g>
</svg>

ここの<?xml…>と<!– Geerate …–>の部分は必要ないので、svg以下をコピーしてHTMLファイルに貼り付けます。

styleをsvgタグ内からheadタグに移します。
styleに関しては、後ほど加工します。

CSSの調整

pathのCSS fillプロパティは塗りの設定になります。
塗りのあるpathは以下のようなCSSの設定になっています。

.st2{
  fill:#2FBAD1;
  stroke:#2FBAD1;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-miterlimit:10;
}

塗りの部分はVivue自体ではアニメーションされませんので、ここは一旦noneに変更します。

.st2{
  fill:none;
  stroke:#2FBAD1;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-miterlimit:10;
}

塗りの部分は、Vivue.jsのコールバック時にCSS のOpacityをTransitionにて変化させてフェードインさせるようにします。まずは、塗り用のクラスを作成します。

.fill{
  fill-opacity: 0;
  fill:#2FBAD1;
  transition: fill-opacity 0.8s;
}
.draw .fill{
 fill-opacity: 1;
}

塗りのある該当pathに上記のfillクラスを追加します。

<path class="st2 fill" ...>

また、SVGタグ自体にVivueで使用するためのわかりやすいID属性を設定しておきます。

JavaScriptの設定

Viveuの基本的な書き方は、

<script> new Vivus(対象SVGに設定したID, {duration: 300}, callback関数); </script>

という形になります。
durationはアニメーションの速度の設定となります。

その他にもアニメーションの動きに関するプロパティがありますので、公式のGitHubページを参考にしてみてください。

公式GitHubページ
https://github.com/maxwellito/vivus

よく使うものでは、「type」「start」「duration」などです。

typeの各設定の概略

typeは、各pathのアニメーションを実行するタイミングの設定となります。

「delayed」はpathのアニメーションが実行するタイミングを少しずらしてスタートさせます。

「Sync」は全て同時になります。

「OneByOne」はpathを一個ずつ描画していきます。こちらは、ペンで一筆ずつ描いているようなアニメーションになります。

animTimingFunction

こちらは、SVGの描画アニメーションの終わるタイミングの動きの設定になります。
値は「EASE」「EASE_IN」「EASE_OUT」「EASE_OUT_BOUNCE」があります。
設定する場合は、「animTimingFunction:Vivus.EASE」などとします。

callback関数にて、Line Drawアニメーションが終わったタイミングで、fill(塗り)が行われるようにdrawクラスを追加します。

以下が上記サンプルのJavaScriptとなります。

const anime = () =>{
new Vivus('svg-animation', {start:"autostart",type: 'oneByOne',duration: 300, forceRender: false ,animTimingFunction:Vivus.EASE}, (obj) => {
obj.el.classList.add('draw');
});
}
anime();

また、もう少し複雑なラインのイラストでも簡単に行えます。

See the Pen
Vivus.js DEMO 2019.05.26
by Norihiko Takami (@sonic_cat)
on CodePen.

上記のように、pathが多く、各pathの長さがバラバラの場合は、各pathの描画完成速度を調整した方がより自然な感じになります。
その場合は、typeに「scenario」もしくは「scenario-sync」が用意されています。

上記の値を設定した場合は、pathもしくはlineタグのdata-属性にてdrationやstartのタイミングが設定できます。
この辺りはまた次回に。

    ▲ PAGE TOP