見出し画像

Vivus.jsで手書きアニメーション作成

Pano｜webエンジニア

今回紹介するのはVivus.jsです。Vivus.jsは、svgファイルの描画アニメーションのライブラリです。このVivus.jsを用いて、文字を手書きで書いているように見せるアニメーションを作成します。自身はwebエンジニアなので、デザイナーではなく、webエンジニア目線からHow toを7ステップでお話していきます！

Vivus.jsの導入の前に、Adobe Illustrator（AI）でsvgファイルを作成します。成果物は以下です。といっても動画は添付できないので、静止画で割愛させてください。自身は、成果物をローカルサーバーを立ち上げて、htmlファイルで確認しています。ので、事前に用意しておくのも良いでしょう。

画像7


1. まず、AIを開きます。今回書く文字は「note」なので、Type Toolで「note」の文字を書きます。フォントはSign Painter、サイズは、180pt（240px）に設定しています。

画像1

2. 次に、Layerを新規追加します。新規のLayerで、Curvature Toolを用いて、文字をなぞります。なぞることで、pathが作成されアニメーションにした時になぞった順序で文字が書かれていくようになります。Curvature Toolの塗り潰しは指定しないようにしましょう（画像参照）。

画像2

3. なぞったら、1で書いた「note」のLayerを消します。

画像3

4. 残った「note」の文字を編集します。線の太さ、丸み、色を調整して以下のようにします。指定は「線（stroke）」パネルでできます。

画像4

5. 保存します。「Object」→「Artboards」→「Fit to Artwork Bounds（オブジェクト全体に合わせる）」で余白を消して、svg画像で保存します。保存すると、ファイルの中身にpath要素があることが確認できます。path要素がないただのsvgファイルでは、Vivus.jsが効いてきませんので、ここがキーとなっています。

画像5

6. htmlファイルにVivus.jsとjQueryを読み込ませます。また、div要素にid='vivus-note'をつけて以下のように指定します。（※ 型しか書いていないのでご了承ください。）

htmlファイル

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id='vivus-note' style='width: 530px; height: 600px; margin: 0 auto;'>
    </div>
  
    <script src='jqueryを読み込む'></script>
    <script src='vivus.jsを読み込む'></script>
    <script src='jsファイルを読み込む'></script>
  </body>
</html>

jsファイルは、Vivus.jsのGitHubに従って記述していきます。fileの値には、svgファイルが存在するパスに書き直してください。

jsファイル（jQuery）

$(function() {
 new Vivus('vivus-note', {
   type: 'oneByOne',
   duration: 400,
   forceRender: false ,
   animTimingFunction: Vivus.EASE,
   file: './note.svg'
 });
});

7. HTMLファイルをブラウザで表示させると添付のようになります！（※ 静止画ベースで申し訳ないです(--)。自身はローカルサーバーを立ち上げて確認しています。）

画像6


以上となります٩( ᐛ )و