【初心者向け】Vivus.jsを使ったSVGアニメーションの作り方

Webページを開くと、次のようなSVGアニメーションが流れるサイトを見たことはありませんか?

アウトラインアニメーション

手書き風アニメーション

gifアニメーション

今回は、Vivus.js というJavaScriptのライブラリを使って、上の「手書き風アニメーション」と「アウトラインアニメーション」の作り方について初心者向けに解説します。

こんな人にオススメ！

vivus.jsのダウンロード方法やCDNの設定方法から知りたい
ファイル構成についても知りたい
Vivus.jsのアニメーションの設定方法も知りたい

できるだけわかりやすく解説するので、ぜひ最後まで読んでみて下さいね！

📖目次に戻る

SVGアニメーションの仕組み

Vivus.jsを使ってアニメーションを作成するためには、HTMLやCSS、Javascriptファイルの他に、以下のデータやライブラリを準備する必要があります。

SVGデータ … adobe illustratorなどで描画したフォントをアウトライン化したデータ。
Vivus.jsライブラリ … javascriptのライブラリ。手書き風アニメーションの動きを実装する。

Vivus.jsを使ったSVGアニメーションの導入手順は特に決まっていませんが、今回は、簡単でわかりやすい次の３ステップで進めたいと思います。

📖目次に戻る

アウトラインアニメーション

Vivus.jsを使ったアウトラインアニメーションを実現するためには、adobe illustratorなどで入力したテキストを「アウトラン化」したデータを用意する必要があります。

Vivus.jsとCSSを使って、SVGデータを「線」を描画した後に「塗り」の指定をしたCSSのクラスを追加することによってアニメーションを表現します。

📖目次に戻る

手書き風アニメーション

Vivus.jsを使った手書き風アニメーションを実現するためには、入力したテキストをアウトラン化した「ベース用」のデータと、「ベース用」データをペンツールで一筆書きでなぞった「マスク用」のデータを用意する必要があります。

そして「ベース用」のSVGデータを「マスク用」のデータで覆い隠した状態から、Vivus.jsとCSSを使って「マスク用」のデータのみを動かすことによりアニメーションを表現します。

それでは、実際に作成する手順を見ていこう！

📖目次に戻る

SVGデータの作り方

今回は、 Adobe illustrator を使用したSVGデータの作成から書き出し方法を解説します。

例として、筆記体調のフォント「SignPainter」を用意します。

皆さんは、お好きなフォントをご用意くださいね！

まずは、ベースとなるSVGデータ（以下、ベース用データ）の作成方法について解説します。

step
1フォントの入力

文字ツールで、適当なスペースに線なしの塗りのみでフォントを入力します。

サイズは後でCSSで調整するので任意の大きさでOK。

step
2テキストをアウトライン化する

画面上部メニューの ❶「書式」→ ❷「アウトラインの作成」をクリックします。

アウトラインを作成すると自動的にグループ化されます。

手書き風アニメーションを実装する場合は、必須ではありませんが、余計なタグ（<g>…</g>タグ）を外して少しだけコードをスッキリさせるために、

❶ 右クリック → 「グループ解除」をクリックし、グループ解除しておきます。

これでベースとなるテキストのアウトラインデータが完成しました。

step
3レイヤー名を変更する

併せて、レイヤー名の変更と作成を行います。

❶ レイヤー名を変更します。（今回は「base」※とします。）

（❷ 次の作業がある場合は、作業を行いやすいようにロックをかけておきます。）

注意ポイント

※レイヤー名は自由ですが、ここで命名したレイヤー名が<svg>タグや、<g>タグの「id」名になります。後でこのidを使ってCSSを指定します。（後で打ち替えることも可能）

これでベース用データが完成しました。お疲れ様でした。

アウトラインアニメーションを行う場合は、ここで illustrator での作成は終了です。「SVGの書き出し」まで飛んで続きからご覧ください。

step
4新規レイヤーを作成する

手書き風アニメーションを行う場合は、続けてマスク用のSVGデータの作成も行う必要があります。

❶ 新規レイヤーを作成ボタンをクリックします。

❷ 新規レイヤーに名前をつけます。今回は「mask」とします。

step
5ベース用データをなぞる

先ほど作成した「マスク用」のレイヤーを選択した状態で、一筆書きでベース用データの上から ペンツールでなぞります。

線幅を調整し、下のベース用の文字が隠れるように描くのがポイントです。

さらに次の設定を選択することで隠しやすくなります。

線端 … 丸型線幅
角の形状 … ラウンド結合

「ベース用」データが見えなくなったのを確認できたら、次は「書き出し」を行います。

📖目次に戻る

SVGデータの書き出し

SVGの作成が完了したら、今度は書き出しを行います。

❶ ファイル → 書き出し → 書き出し形式をクリック

❷ 書き出しウィンドウで、ファイル形式を「SVG(svg)」に設定し、「書き出し」をクリック

（今回は、後でコードとしてHTMLに取り込むので、保存先はどこでもOK！）

❸ SVG形式の書き出し方法には色々ありますが、今回は次のような設定をしてOKをクリックします。

スタイル … 「内部CSS」にすることで、スタイル内容が<style>タグに囲まれた状態で書き出されます。今回は、後で作業しやすいのでこの設定にしました。（ちなみに「インラインスタイル」「プレゼンテーション属性」の場合は、各<path>タグごとにCSSなどが設定された状態で書き出されます。）
フォント … 事前にアウトライン化しているので、初期設定のまま。
画像 … 今回は画像を使用していないので、初期設定のまま。
オブジェクトID … 「レイヤー名」にすることで、マスク用＆ベース用につけたレイヤー名がIDとして付与されます。
縮小 … チェックを外すことで、コードが整形されて書き出されます。
レスポンシブ … チェックを外すことで、width と height が省略されずに書き出されます。この２つ属性がないと Android などで表示が崩れる場合があります。

これで、SVGデータを書き出すことができました。

次は Vivus.js の設定方法を一緒に見ていこう！

📖目次に戻る

Vivus.js の導入

今回はvivus.jsを最低限動かすために、次のようなフォルダ構成で作成する想定で説明をします。

皆さんは、それぞれ状況が違うと思いますので、ファイル名やファイルの場所などを適宜変更して下さいね！

Vivus.jsを設定するためには、vivus.jsを作業ファイルに取り込む必要がありますが、今回は「CDN」を利用する方法と「ダウンロードファイル」を利用する方法をご紹介します。

📖目次に戻る

Vivus.jsのCDNを利用する場合

step
1CDNをコピーする

❶ ダウンロードページの「jsDelivr CDN」または「CDNJS CDN」のCDNを使用します。

今回は、「jsDelivr CDN」のCDNを使用します。以下のCDNをコピーしましょう。

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

ちなみにCDNJS CDNでは、以前のバージョンのCDNを指定することもできるよ！

ー

step
2CDNを貼り付ける

index.html の <body>タグの下部に、コピーしたvivus.jsのCDNを貼り付けます。

さらにすぐ下に、独自のjsファイルである script.js を記述します。

📖目次に戻る

Vivus.jsをダウンロードする場合

step
1Zipファイルをダウンロードする

❶ ダウンロードページの「code」→ ❷「Download ZIP」をクリックします。

ー

❸ ダウンロードしたZIPファイルを解凍します。

「dist」フォルダ内の「vivus.min.js」を自分の作業フォルダの「js」フォルダにコピーします。

vivus.jsでも動かせるけど、vivus.min.jsの方が軽くてオススメだよ！

ー

step
2Zipファイルを読み込ませる

index.html の <body>タグの下部に、次のようにvivus.min.jsのファイルを指定します。

さらにすぐ下に、独自のjsファイルである script.js を記述します。

Vivus.jsの準備ができたら、次は使い方を見てみよう！

📖目次に戻る

Vivus.js の使い方

書き出したSVGデータと設定したvivus.jsを組み合わせて、実際に手書き風のSVGアニメーションを動かしてみましょう。

前項でも説明したとおり、今回はvivus.jsを最低限動かすために、次のフォルダ構成で作成する想定で説明をします。

「SVGデータの作り方」と「vivus.jsの導入」をまだ見ていない人は確認してね！

📖目次に戻る

アウトラインアニメーションの場合

step
1SVGを取り込む準備をする

HTMLの<body>タグ内にSVGアニメーションを動かすために、次のようなコードを用意します。

</g>

</svg>

<g>タグのid名はvivus.jsに設定するid名と一致させます。（自由に設定可能。今回は sample ）

step
2SVGを取り込む

❶ SVGファイルを右クリック → 「エディター」をクリックして開く。

または、ファイルをそのままエディターにドラッグして開きます。

SVGデータの中身を確認します。次のようなコードが展開されます。

オレンジの部分が、後でHTMLファイル（例：index.html）にコピー＆ペーストする部分です。

<?xml version="1.0" encoding="UTF-8"?>

<defs>

<style>

.cls-1 {

fill: #231815;

}

</style>

</defs>

</svg>

step
3SVGデータをHTMLにコピーする

前のステップでコード化したSVGデータの次の部位を、HTML内に用意した適切な箇所にコピー＆ペーストします。（下のコード内のオレンジの部分）

SVGタグのid （今回は、base ）
width と height （今回は、 width="208.13" height="121.98" ）
viewbox（今回は、viewBox="0 0 208.13 121.98" ）
ベース用データ（ <path … /> の部分）

ペーストした後は、SVGデータに付いている不要なクラスを削除します。（下のコード内のブルーの部分）

<path>タグに付いているクラスを削除（今回は、class="cls-1"）

</g>

</svg>

step
4仕上げ作業（完成）

HTMLの完成データは以下のとおりです。

次に、スタイルシートを用意するために、HTMLの<head>タグ内に<link>タグでパスを指定します。

（今回は、HTMLと同じ階層にCSSというフォルダを作成し、その中にstyle.cssを用意します。）

style.cssの中身は、次のとおりです。

#base {
width: 50%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#sample path {
fill-opacity: 0; /*透過0で塗りの色が見えない状態*/
transition: fill-opacity .5s; /*0.5秒で色が付くアニメーション*/
fill: none; /*塗りの色*/
stroke: #000; /*線の色*/
}
#sample.done path{
fill: #000; /*塗りの色*/
fill-opacity: 1; /*透過1で塗りの色が見える状態*/
stroke: none; /*線の色*/
}

#base に指定したCSSは、レスポンシブ対応で画面中央に配置する命令です。（必須ではありません。）
#sample path に指定したCSSは、塗りは透過させて線だけの状態にしています。transition の部分は、後でクラスが付与されて透過が解除される時に、0.5秒でアニメーションをさせる命令をしています。
#sample.doon path に指定したCSSは、アウトラインアニメーションが終わった後の状態を指定しています。

最後に、Vivus.jsを動かすために用意したscript.js内に、次のようなコードを記述します。

new Vivus( "sample", //SVGに指定したID
{
type: "oneByOne", //アニメーションのタイプ
duration: 100, //アニメーションの時間
forceRender: false, //パスが更新で再レンダリングさせない
},
function (obj) {
obj.el.classList.add("done"); //アニメーション後にdoneクラスを付与
}
);

１行目のid名は自由に指定可能ですが、SVGタグに記述したid名と合わせる必要があります。（今回は sample ）
2行目以降の{ }内には、簡単な設定内容を指定しました。
function以降には、アニメーションが終わった後に、付与するクラスを指定しています。（今回は、done）

これでアウトラインアニメーションのSVGの動きは完成しました。お疲れ様でした。

アニメーションの詳細な設定については、この記事の最後の「Vivus.jsのオプション・設定」参考にしてね！

📖目次に戻る

手書き風アニメーションの場合

step
1SVGを取り込む準備をする

HTMLの<body>タグ内にSVGアニメーションを動かすために、次のようなコードを用意します。

id名はvivus.jsに設定するid名と一致させます。（自由に設定可能ですが、今回は sample ）

step
2SVGを取り込む

❶ SVGファイルを右クリック → 「エディター」をクリックして開く。

または、ファイルをそのままエディターにドラッグして開きます。

SVGデータの中身を確認します。次のようなコードが展開されます。

オレンジの部分が、後でHTMLファイル（例：index.html）にコピー＆ペーストする部分です。

<?xml version="1.0" encoding="UTF-8"?>

<defs>

<style>

.cls-1 {

fill: none;

}

.cls-2 {

fill: #231815;

}

</style>

</defs>

</g>

</g>

</svg>

step
3SVGデータをHTMLにコピーする

コード化したSVGデータの次の部位を、HTML内に用意した適切な箇所にコピー＆ペーストします。（下のコード内のオレンジの部分）

width と height （今回は width="208.13" height="121.98" ）
viewbox（今回は、viewBox="0 0 208.13 121.98" ）
ベース用データ（今回は、baseというidを付けたので <g id="base">…</g> の部分）
マスク用データ（今回は、maskというidを付けたので <g id="mask">…</g> の部分）

次に、SVGデータに付いている不要なクラスを削除します。（下のコード内のブルーの部分）

マスク用データに付いているクラスを削除（今回は、class="cls-2"）
ベース用データに付いているクラスを削除（今回は、class="cls-1"）

<defs>

<mask>

</g>

</mask>

</defs>

</g>

</svg>

step
4仕上げ作業（完成）

SVGのマスクを適用させるために、<mask>タグにidを設定し、そのid名をベース用SVGデータの<g>タグのmask属性に指定します。

<mask>タグ に idを設定する （今回は id="svgMask" ）
マスク用データの<g>タグ に mask属性を設定する （今回は mask="url(#svgMask)" ）

次に、スタイルシートを用意するために、HTMLの<head>タグ内に<link>タグでパスを指定します。

（今回は、HTMLと同じ階層にCSSというフォルダを作成し、その中にstyle.cssを用意します。）

style.cssの中身は、次のとおりです。

#sample {
width: 50%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#base path {
fill:#000; /* 塗りの色 */
}
#mask path {
fill:none; /* 塗りの色 */
stroke:#ffffff; /* 線の色 */
stroke-width:10px; /* 線幅 */
stroke-linecap:round; /* 線端の形状 */
stroke-linejoin:round; /* 角の形状 */
}

#sample に指定したCSSは、レスポンシブ対応で画面中央に配置する命令です。（必須ではありません。）
#base path に指定したCSSは、ベースとなる文字の色です。
#mask path に指定したCSSは、マスクの部分の命令です。fill:none; と stroke:#ffffff; を指定することでマスクとして機能します。それ以外の stroke-○○ については、adobe illustratorで指定した内容を反映させます。（上手く隠れない場合は、適宜調整します。）

最後に、Vivus.jsを動かすために用意したscript.js内に、次のようなコードを記述します。

new Vivus( 'sample', { // svgに指定するid名
duration: 120, // アニメーションの長さ
forceRender: false, //パスが更新で再レンダリングさせない
});

１行目のid名は自由に指定可能ですが、SVGタグに記述したid名と合わせる必要があります。（今回は sample ）
２行目以降は、簡単な設定内容を指定しました。

これで手書き風のSVGの動きは完成しました。お疲れ様でした。

アニメーションの詳細な設定については、この次の「Vivus.jsのオプション・設定」を参考にしてね！

📖目次に戻る

Vivus.js のオプション・設定

Vivus.jsでは、アニメーションの種類や長さ、開始するタイミング、アニメーションが終了した後の命令など、オプションや設定を細かく設定することが可能です。

それぞれ、詳しくみてみましょう。

SVGのID
アニメーションのオプション
アニメーション後に呼び出す関数

Javascriptの関数について詳しく知りたい方はコチラ！

📖目次に戻る

アニメーションのオプション

Vivus.jsの主なアニメーションのオプションは次のとおりです。

type	アニメーションのタイプ（`delayed`(デフォルト) 、`sync`、`oneByOne`、`scenario`または`scenario-sync`）
start	スタートのきっかけ（ `inViewport`(デフォルト)ビューポートに表示されると開始、`manual`描画メソッドを自由に呼び出して開始、`autostart`即開始）
duration	アニメーションの長さ (デフォルトは200)
delay	最初と最後のパスの描画の間の時間 ( タイプが`delayed`時のみ )

📖目次に戻る

アニメーションのタイプ

Vivus.jsのアニメーションのタイプは次のとおりです。

delayed	全てのパス描画が少しずつ遅れて描画される（デフォルト）
sync	全てのパス描画が一斉に描画され、同じタイミングで終了
oneByOne	パスが一つずつ描画される

delayed

delayed

sync

sync

oneByOne

oneByOne

scenario

各<path>タグにdata属性のdata-start、data-duration を設定することで順序に関係なく動きを指定することができる。

data-start(整数) アニメーションを開始する必要がある時間
data-duration(整数) このパスのアニメーション期間

scenario-sync

各<path>タグにdata属性のdata-delay、data-duration、data-async を設定することで順序に関係なく動きを指定することができる。

data-delay(整数) 前のパスのアニメーションの終了から現在のパスの開始までの時間
data-duration(整数) このパスアニメーションの持続時間
data-async(値は必要なし) このパスの描画を非同期にします。次のパスが同時に開始されることを意味します。パスに期間または遅延の属性がない場合は、オプションで設定されたデフォルト値が使用されます。

今回は、よく指定をするアニメーションのタイプに付いて説明しましたが、さらに詳しく知りたい方は Vivus.jsのページをご覧ください。

vivus.jsはまだまだ設定方法がたくさんあるよ！色々試してみてね！

📖目次に戻る