【CSS】手書き風アニメーションをCSSのみで実装する方法

【CSS】手書き風アニメーションをCSSのみで実装する方法 CSS

こんにちは！さこちゃんです。

今回の記事は「手書き風アニメーションをCSSのみで実装する方法」についてです。

まろんちゃん
まろんちゃん

JSを使わずに手書き風アニメーションを実装する方法はあるの？

さこちゃん
さこちゃん

CSSだけで実装できるよ！一緒にやってみようね〜

デモ確認

今回はこちらのデモを目指しましょう。
※すぐにアニメーションが開始します。

デモページを見る

動きを実現する仕組み

手書き風アニメーションは、vivus.jsというライブラリで実装可能ですが、CSSでも簡単にできます。

SVGデータを準備し、illustrationでそのパス（マスク）を作成する。CSSアニメーションで左から順にパスを動かすことで、テキストが手書きで現れるように見える、という仕組みです。

実装までの手順はこんな感じです。

  • 手書き風テキストのSVGデータ（以下背景画像）を準備する
  • illustrationのペンツールで背景画像のパスを作成する
  • HTMLで背景画像を配置する
  • 作成したパスを背景画像にマスクし、CSSアニメーションでパスを左から順に動かす（＝手書きのように見せることができる）

illustrationでパスを作成する

まずは手書き風テキストのSVGデータを準備し、illustrationで開きましょう。
ここでは「demo02_txt.svg」という名前にしています。

開いたらレイヤーをロックし、一つ上の階層に新規レイヤーを作成しましょう。

Sample

先ほど作成した新規レイヤー上で、手書き風テキストのパスを作成していきます。
ペンツールを使い、塗りはなし、線のみにして「Sample」の文字を下図のように上からなぞりましょう。

パスの色と太さは何でも構いません。
ここではパスは赤色、太さは1pxにしています。

Sample
さこちゃん
さこちゃん

ポイントは、一筆書きにすること！一筆書きにすることで、きれいなアニメーションが実現するよ〜

次に先ほど作ったパスを、背景の画像が全て隠れるまで太くします。
ここでは1px→6pxに変更しました。こんな感じになります。

Sample

次に、パスを塗りはなし、線なしにします。こんな感じになります。
これを書き出しし、「demo02_mask.svg」という名前でローカルに保存しておきましょう。

Sample


背景画像のマスク「demo02_mask.svg」が完成しました。
これでillustrationを使った作業は終了です。

HTML構造を作る

まずはこちらのHTMLをコピーしましょう。
これをベースに作業を進めていきます。

<svg id="svg-mask" viewBox="ここに値を入れる" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- 背景画像のマスク（パス） -->
    <mask id="txt-mask">
        ここにpathを入れる
    </mask>

    <!-- 背景画像 -->
    <image href="..." mask="url(#txt-mask)" />
</svg>

順に解説していきます。

解説1 <svg>のviewBoxの値を入力する

まずは<svg>のviewBoxの値を入力しましょう。

値の確認方法ですが、先ほど作った「demo02_mask.svg」をエディタで開きましょう。
すると下図のようなコードが出てくると思います。

「viewBox=”0 0 200.053 69.717″」の数値をコピーし、「ここに値を入れる」箇所にペーストしてください。
viewBoxとは、SVGビューポートのユーザー空間の位置と大きさを定義するものです。

下記のようになります。

<svg id="svg-mask" viewBox="0 0 200.053 69.717" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
・
・
・
</svg>

解説2 背景画像のマスク（パス） を追記

次に背景画像のマスク（パス） のコードを追記します。

解説1と同様、最初に作った「demo02_mask.svg」をエディタで開きましょう。
すると下図のようなコードが出てくると思います。

こちらの<path>をコピーし、「ここにpathを入れる」箇所にペーストしてください。
そのとき、<path>に「mask-path」というid名をつけましょう。
<path>が複数ある場合も、すべての<path>に同様のid名をつけましょう。

下記のようになります。

<!--  背景画像のマスク（パス）  -->
<mask id="txt-mask">
  <path id="mask-path" 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>

解説3 背景画像を追記

次に背景画像のパスを追記します。

背景画像のパスを記述しましょう。ここでは「demo02_txt.svg」としています。

このとき、「mask="url(#txt-mask)」を追記しましょう。
作成したパスがマスクされるために必要な記述です。

<!-- 背景画像 -->
<image href="./assets/img/demo02_txt.svg" width="100%" height="100%" mask="url(#txt-mask)" />

これでHTMLの準備は完了です。

CSSを記述する

次にCSSを記述します。下記が完成コードです。

#mask-path {
  fill: none; /* 塗りの色 */
  stroke: #ffffff; /* 線の色 */
  stroke-width: 12; /* 線幅 */
  stroke-linecap: round; /* 線端の形状 */
  stroke-linejoin: round; /* 角の形状 */
  stroke-dasharray: 2000; /* 線の間隔を指定する */
  stroke-dashoffset: 2000; /* 線の位置を指定する */
  animation: draw 5s ease forwards; /* アニメーション設定 5秒間で線が描かれる*/
}
@keyframes draw {
　to {
　　stroke-dashoffset: 0;
　}
}

#mask-pathのスタイル指定の説明は、記述している通りです。

@keyframesでアニメーションの終了時に、stroke-dashoffset を 0 にすることで、パスを徐々に描画（背景画像を徐々に表示）することができます。

おわりに

Vivus.jsを使わずにCSSだけで 手書き風アニメーションを実装する方法を紹介しました。

CSSだけで実装することで、JavaScript に依存しないので、記述がよりシンプルで管理が楽になります。

ぜひ参考にしてみてくださいね。