2024.05.27

SVGとCSSで作る手書き風テキストアニメ【後編】

fujii

2024.05.27

こんにちは。エンジニアの藤井です。
前回に引き続き、SVGを動かして手書き風テキストアニメーションを作成します。

今回は、後編のアニメーションの仕組みと実装方法を紹介します。
アニメーションさせる画像の作成とスタイルの整え方は、こちらをご覧ください。

SVGとCSSで作る手書き風テキストアニメ【前編】 | 東京のWeb制作・デザイン会社 - ナップブログ

東京、恵比寿のデザイン会社、KNAP（ナップ）が運営するブログです。KNAPの日報 "KNAPO!" も日々更新しています。

https://knap.jp/blog/seisaku-fujii-20240521

完成形

See the Pen Handwriting text by knap_develp (@knap_develp) on CodePen.

作っているのは、KNAPの合言葉「Design trekking」をさらさらと書いていくアニメーションでしたね。
実装は次の手順で、今回は3を進めていきましょう。

1.SVG画像を作成する
2.CSSでスタイルを整える
3.アニメーションを追加する（★）

手書き風アニメーションの仕組み

さて、アニメーションを実装する前に仕組みを確認しておきましょう。
パスラインを動かすには、CSSプロパティのstroke-dasharrayとstroke-dashoffsetを使用します。

1000px のパスラインを例にみていきましょう。

stroke-dasharray は、破線の間隔を指定します。
1000px のパスラインに、stroke-dasharray: 200px を指定すると、200pxおきに線が描画されます。

アニメーションでは、パスラインいっぱいに線を描画したいので、同じ長さの 1000px を指定します。

次に、stroke-dashoffset で描画ラインのスタート位置を指定します。
例えば、stroke-dashoffset: 400px を指定すると、描画ラインはマイナス方向に移動して、はみ出た部分は見えなくなります。

こちらを利用して、パスラインと同じ長さの 1000px を指定して描画ラインを全て見えない状態にしておきましょう。

そして、animation で stroke-dashoffset の値を小さくしながら、描画線を移動せさることで、線を書いているように見せていきます。

これが手書き風アニメーションの仕組みです。

実装③ アニメーションを追加する

それでは、前回準備した画像に動きを加えていきましょう。

描画ラインとなる .handwriting_mask_line セレクタに stroke-dasharray を指定しましょう。
テキストの長さに合わせて値を調整してください。
今回は、4000px でパスラインいっぱいに線を描画できました。

stroke-dashoffset は、4000px から 0px に移動するように、@keyframes と animation を指定ましょう。

完成したコード（CSS）は、次の通りです。

.block {
  padding: 10%;
}

#text {
  mask: url(#mask);
}

.handwriting {
  width: 100%;
  height: auto;
  
  &_text {
    fill: #404040;
  }
  
  &_mask {
    &_line {
      fill: none;
      stroke: #fff;
      stroke-width: 7;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 4000px;
      animation: handwriting 4s linear infinite;
    }
  }
}

@keyframes handwriting {
  0% {
    stroke-dashoffset: 4000px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}