手書き文字のアニメーション表示

Update 2020.2.8

はじめに

vivusを利用したアニメーション表示

手書きした文字や線をアニメーション表示するための実装方法を解説します。

ライブラリ
描画アニメーションを簡単に実装できるvivus.jsを利用します。 描画したデータを描画した順番に表示し、 そこに描いているようにアニメーション表示できます。
表示対象
描画ソフトで文字や線画を描き、SVG形式で出力したデータです。
表示色など
pathタグに表示色や線の太さなどのスタイルを設定できます。
表示順
初期状態では描画した順序で表示されますが、 描画された線分ごとのpathタグがsvgに出力されるので、 pathタグ単位で順序を入れ替えれば表示順も代えられます。
動きの設定
アニメーションの動きは、vivusのオプションで設定できます。

サンプル

　再表示　

実装手順

手書き文字の作成

手書き文字には描画データをsvg形式で出力できるソフトウェアを利用します。 ここではAdobe illustratorの操作方法を記載します。

  1. 手書き描画
    線を自由に描ける鉛筆ツールやブラシツールを使って表示したい文字か線を描きます。 この記事では手書き文字をアニメーションにしたいので鉛筆ツールを使いましたが、 pathが取れれば何を使ってもかまいません。
  2. アートボードサイズ
    描画した範囲をアートボードサイズにするため
    メニュー＞オブジェクト＞アートボード＞オブジェクト全体に合わせる
    をクリックします。描画した範囲がアートボードサイズになります。
  3. ai形式で保存
    メニュー ＞ ファイル ＞ 保存（初めての場合は別名で保存）
  4. svg形式で出力
    メニュー ＞ ファイル ＞ 別名で保存
    でファイルの種類を「SVG(*.SVG)」にして保存します。

svg形式で出力すると次のような内容になります。描いた線分ごとにpathタグで出力されています。

htmlファイル

アニメーションを実行するhtmlファイルを作成します。

  1. svgデータの抽出
    svg形式のファイルを開いてsvgタグで囲まれた範囲をコピーし、htmlファイルにペーストします。
  2. svgタグのid設定
    vivusのオプションを適用するidを指定します。
    この記事では"draw-animation"です。
  3. pathタグのクラス設定
    線分表示のプロパティを適用するクラス名を指定します。 SVG出力に記載のままでかまいませんが、線分毎に色などの属性を指定するなら別々のクラス名にします。
    この記事では"st0"、"st1"などです。
  4. 表示位置の設定
    SVGタグのスタイルで絶対位置、親要素で表示領域を設定します。 この記事ではsvgタグにdraw-positionクラス、親要素にdraw-containerクラスです。 
    5. <div class="draw-container">
  <svg id="draw-animation" class="draw-position" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 150">
    <path class="st0" d="M8.56,15.1C42.78,13.09,77,11.08,111.22,9.06c2.87-0.17,6.24-0.13,8,2.15c1.92,2.49,0.76,6.08-0.57,8.93
    c-10.89,23.38-28.11,43.76-49.34,58.4" />
    <path class="st0" d="M56.77,53.35c9.07,12.03,14.25,26.94,14.58,42.01c0.33,15.06-4.18,30.19-12.71,42.61" />
    
    <path class="st2" d="M635.92,29.07c10.53,5.1,15.39,10.53,30.79,29.41" />
    <path class="st2" d="M655.4,135.09c38.63-32.36,61.45-61.85,85.3-112.67" />
  </svg>
</div>
  5. CSSファイル参照
    アニメーションの表示属性を記述したcssファイルの参照をhead要素に記載します。
    この記事では"drawing.css"です。 
    <link href="./css/style.css" rel="stylesheet">
<link href="./css/drawing.css" rel="stylesheet">
  6. jqueryとvivusの参照
    bodyの終了タグ前に次の通り記述します。 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.4/vivus.min.js" type="text/javascript"></script>
</body>
  7. jsファイルの参照
    アニメーションの動作オプションを記載したjsファイルの参照を body要素の終了タグの前にjqueryとvivusの参照に続けて記載します。
    この記事では"animation.jsです。 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.4/vivus.min.js" type="text/javascript"></script>
  <script src="./js/animation.js"></script>
</body>

cssファイル

  1. サイズと配置
    用途に応じてアニメーション領域のサイズと配置のプロパティを設定します。
    この記事では"drawing.css"のdraw-containerクラスで表示サイズを、 draw-positionクラスで配置を設定しました。サンプルを示しますが、 vivusとは無関係に表示したいレイアウトを設定できます。 
    .draw-container {
    position: relative;
    max-width: 500px;
    width: 90%;
    height: 150px;
    margin: 0 auto;
}

.draw-position {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
  2. 表示プロパティ
    描画したスタイルがsvg形式ファイルにstyleタグで出力されているので、 これをコピーしcssファイルにペーストし、線分のプロパティを適宜変更します。
    この記事では"drawing.css"です。 
    .st0 {
  fill: none;
  stroke: darkblue;
  stroke-width: 10px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10
}

jsファイル

  • vivusのアニメーション動作のオプション条件を設定し、保存します。
    この記事では"animation.js"です。 
    new Vivus('draw-animation',
  {
      type: 'oneByOne',
      start: 'inViewport',
      duration: 200,
      animTimingFunction: Vivus.EASE
  });
    オプションの詳細は、 Option List　 をご覧ください。

動作確認

アニメーション表示の実装で説明した次のファイルと、 通常のCSSファイルやjsファイルを用意して動作確認します。
実装手順に沿って作成できていればアニメーション表示ができます。

index.html
アニメショーンするSVGデータを含むhtmlファイル
drawing.css
アニメーション対象の表示属性を設定したcssファイル
animation.js
アニメーション動作のオプションを設定したjsファイル

アニメーション表示のサイズや配置は希望する属性を設定してください。
私の場合はアニメーション表示より表示属性やレイアウトなどのスタイル設定の方に時間がかかりました。

おわりに

経緯

当初フォントを手書き風にアニメ表示できるanime.jsを 試していたのですが、期待通りに動作しない状態が続いた頃に vivus.jsの参考サイトを見つけ、切り替えて試したものです。 もともと手書き文字のアニメ表示をしたかったので、 anime.jsよりvivus.jsの方が適していました。

今回、手書き文字のアニメ表示が実装できたので、 次回はフォントのアニメ表示に再挑戦してみます。 こちらはSVG画像の文字部分をあらかじめマスクしておいて、 アニメーションでマスクを少しずつはがしていく仕組みなので、 文字だけでなく写真などの画像にも応用できそうです。 実装できたらこのような解説ページを作成して公開します。

なお、この記事は自分のスキルアップを目的として 理解が不十分な状態で作成したものなので、 解説の拙い点はご容赦ください。

参考にしたサイト

手書き文字のアニメ表示とこの記事を作成するのに 次のサイトの情報を利用させていただきました。 ありがとうございました。