こんにちは！さこちゃんです。
今回は「手書き風アニメーションをVivus.jsで実装する方法」について解説します。
Vivus.jsって聞くだけでなんか難しそうなんだが・・・
意外と簡単に実装できるよ〜
Vivus.jsとは？
Vivus.jsとは、SVG画像のパスをアニメーションで描画する際に使用できるJavaScriptライブラリです。
特に、手書き風の筆記体や線画アニメーションを簡単に作成できるのが特徴です。
SVG画像を1つずつ描画していくようなアニメーションを、比較的少ないコードで実現することができます。
公式サイトはこちら。
CSSアニメーションで実装する方法も紹介しています。
ぜひチェックしてみてね。
デモ確認
今回のデモはこちら！
※すぐにアニメーションが開始します。
さっそく手順を確認していきましょう〜
illustrationでSVG画像のパスを作成する
まずはSVG画像を用意し、illustrationで開きましょう。
ここでは「demo03_txt.svg」という名前にしています。
開いたらレイヤーをロックし、一つ上の階層に新規レイヤーを作成しましょう。
先ほど作成した新規レイヤー上で、手書き風テキストのパスを作成していきます。
ペンツールを使い、塗りはなし、線のみにして「Sample」の文字を下図のように上からなぞりましょう。
パスの色と太さは何でも構いません。
ここではパスは赤色、太さは1pxにしています。
ポイントは、一筆書きにすること！一筆書きにすることで、きれいなアニメーションが実現するよ〜
次に先ほど作ったパスを、SVG画像が全て隠れるまで太くします。
ここでは1px→6pxに変更しました。こんな感じになります。
次に、パスを塗りなし、線なしにします。こんな感じになります。
これを書き出し、「demo03_mask.svg」という名前でローカルに保存しておきましょう。
SVG画像のパス「demo03_mask.svg」が完成しました。
これでillustrationを使った作業は終了です。
HTML構造を作る
まずはこちらのHTMLをコピーし、手元のHTMLにペーストしましょう。
これをベースに作業を進めていきます。
<svg id="mask" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="ここに値を入れる" height="ここに値を入れる" viewBox="ここに値を入れる" xml:space="preserve">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="ここにSVG画像を入れる" width="ここに値を入れる" height="ここに値を入れる" mask="url(#clipmask)"></image>
<mask id="clipmask">
ここにSVG画像のパス<path>を入れる
</mask>
</svg>順に解説していきます。
STEP1 さっき作ったパスをエディタで開く
先ほどイラレで作ったパスをエディタで開きます。
すると下記のコードが出てきます。
「<path d = "・・・・・〜 >」箇所をコピーし、「ここにSVG画像のパス<path>を入れる」箇所にペーストしましょう。
またその時、<path>に「class="st0"」というクラス名をつけておきます。
クラス名は任意で変えて構いません。
下記のようになればOKです。ハイライトが追記箇所です。
<svg id="mask" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="ここに値を入れる" height="ここに値を入れる" viewBox="ここに値を入れる" xml:space="preserve">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="ここにSVG画像を入れる" width="ここに値を入れる" height="ここに値を入れる" mask="url(#clipmask)"></image>
<mask id="clipmask">
<path class="st0" d="m43.384 10.19s19.827-18.025-35.449-3.305c0 0 36.65 11.716 29.74 27.638s-39.954 7.21-37.55-.901c0 0 .3-3.905 7.811-2.103 0 0 76.356-28.091 58.631-7.663 0 0 .913-11.917-21.982 13.671 0 0-.422 14.875 20.155-8.854 0 0-10.773 12.973-2.022 11.292s16.634-8.672 16.634-8.672l6.149-13.796-8.435 23.257s15.877-18.311 21.396-17.759-5.786 17.207-5.786 17.207 17.344-18.448 19.867-18.526-9.776 15.452-5.597 18.448 29.746-28.533 37.49-20.83c8.38 8.336-7.988 18.539-7.988 18.539s-9.338-4.211 1.357-15.676c12.081-12.952-35.058 47.258-34.457 47.56 0 0 4.055-29.097 30.583-46.582 0 0-7.936 22.837 11.658 11.532s13.921-2.412 13.921-2.412 30.899-20.649 25.171-32.255c0 0-29.844 20.197-26.98 41.6 0 0 11.907.151 20.348-9.646 0 0-2.11 3.467-.151 4.823s14.233-8.345 13.264-16.278c0 0-10.484 1.484-11.757 10.099 0 0-5.125 6.933 4.371 9.345 0 0 8.893.452 16.278-6.029" fill="none"/>
</mask>
</svg>STEP2 幅と高さの値を追記する
STEP1と同様、イラレで作ったパスをエディタで開きます。
viewBoxにある、「0 0 200.053 69.717」が必要な数値です。
幅 = 200.053、高さ = 69.717 を表します。
この数値をそれぞれ「ここに値を入れる」箇所にペーストしましょう。
下記のようになればOKです。ハイライトが追記箇所です。
<svg id="mask" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="201.428" height="74.064" viewBox="0 0 201.428 74.064" xml:space="preserve">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="ここにSVG画像を入れる" width="201.428" height="74.064" mask="url(#clipmask)"></image>
<mask id="clipmask">
<path class="st0" d="m43.384 10.19s19.827-18.025-35.449-3.305c0 0 36.65 11.716 29.74 27.638s-39.954 7.21-37.55-.901c0 0 .3-3.905 7.811-2.103 0 0 76.356-28.091 58.631-7.663 0 0 .913-11.917-21.982 13.671 0 0-.422 14.875 20.155-8.854 0 0-10.773 12.973-2.022 11.292s16.634-8.672 16.634-8.672l6.149-13.796-8.435 23.257s15.877-18.311 21.396-17.759-5.786 17.207-5.786 17.207 17.344-18.448 19.867-18.526-9.776 15.452-5.597 18.448 29.746-28.533 37.49-20.83c8.38 8.336-7.988 18.539-7.988 18.539s-9.338-4.211 1.357-15.676c12.081-12.952-35.058 47.258-34.457 47.56 0 0 4.055-29.097 30.583-46.582 0 0-7.936 22.837 11.658 11.532s13.921-2.412 13.921-2.412 30.899-20.649 25.171-32.255c0 0-29.844 20.197-26.98 41.6 0 0 11.907.151 20.348-9.646 0 0-2.11 3.467-.151 4.823s14.233-8.345 13.264-16.278c0 0-10.484 1.484-11.757 10.099 0 0-5.125 6.933 4.371 9.345 0 0 8.893.452 16.278-6.029" fill="none"/>
</mask>
</svg>STEP3 SVG画像のパスを記述する
最後にSVG画像のパスを記述します。
「ここにSVG画像を入れる」箇所に、SVG画像のパスを記述しましょう。
ここでは「demo03_txt.svg」としています。
※「demo03_mask.svg」ではないので、注意してください。
下記のようになればOKです。ハイライトが追記箇所です。
<svg id="mask" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="201.428" height="74.064" viewBox="0 0 201.428 74.064" xml:space="preserve">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="./assets/img/demo03_txt.svg" width="201.428" height="74.064" mask="url(#clipmask)"></image>
<mask id="clipmask">
<path class="st0" d="m43.384 10.19s19.827-18.025-35.449-3.305c0 0 36.65 11.716 29.74 27.638s-39.954 7.21-37.55-.901c0 0 .3-3.905 7.811-2.103 0 0 76.356-28.091 58.631-7.663 0 0 .913-11.917-21.982 13.671 0 0-.422 14.875 20.155-8.854 0 0-10.773 12.973-2.022 11.292s16.634-8.672 16.634-8.672l6.149-13.796-8.435 23.257s15.877-18.311 21.396-17.759-5.786 17.207-5.786 17.207 17.344-18.448 19.867-18.526-9.776 15.452-5.597 18.448 29.746-28.533 37.49-20.83c8.38 8.336-7.988 18.539-7.988 18.539s-9.338-4.211 1.357-15.676c12.081-12.952-35.058 47.258-34.457 47.56 0 0 4.055-29.097 30.583-46.582 0 0-7.936 22.837 11.658 11.532s13.921-2.412 13.921-2.412 30.899-20.649 25.171-32.255c0 0-29.844 20.197-26.98 41.6 0 0 11.907.151 20.348-9.646 0 0-2.11 3.467-.151 4.823s14.233-8.345 13.264-16.278c0 0-10.484 1.484-11.757 10.099 0 0-5.125 6.933 4.371 9.345 0 0 8.893.452 16.278-6.029" fill="none"/>
</mask>
</svg>CSSを調整する
次にCSSを調整しましょう。コードはこれだけです。
#mask .st0 {
fill: none; /* 塗りの色 */
stroke: #fff; /* 線の色 */
stroke-width: 9; /* 線幅 */
stroke-linecap: round; /* 線端の形状 */
stroke-linejoin: round; /* 角の形状 */
stroke-dasharray: 2000; /* 線の間隔を指定する */
stroke-dashoffset: 2000; /* 線の位置を指定する */
}Vivus.jsを導入する
続いてVivus.jsを設置します。
今回はCDNを使用します。下記のコードを</body>の直前に記述しましょう。
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.4/vivus.min.js"></script>公式ダウンロードページはこちらです。
JSを記述する
最後にJSを記述します。
JSファイルを作る場合は、先ほどのCDNの下にファイルを設置するようにしましょう。
完成コードはこちらです。
window.addEventListener('load', function () {
new Vivus('mask', {
start: 'manual', // 自動再生をせずスタートをマニュアルに
type: 'scenario-sync', // アニメーションのタイプを設定
duration: 150, // アニメーションの時間設定（小さいほど速い）
forceRender: false, // パスが更新された場合に再レンダリングさせない
animTimingFunction: Vivus.EASE // 加速・減速のタイミング設定
}).play(); // SVGアニメーションを再生
});
ポイントは、「scenario-sync」を指定すること！これで手書き風が完成するのだ。
おわりに
手書き風アニメーションをVivus.jsで実装する方法を紹介しました。
CSSアニメーションでも実装は可能ですが、Vivus.jsを使うことで細かいタイミング制御や、アニメーション制御がより簡単に実装することができます。
ぜひ参考にしてみてくださいね。