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

アバター画像 fujii

11

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

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

完成形

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

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

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

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

さて、アニメーションを実装する前に仕組みを確認しておきましょう。
パスラインを動かすには、CSSプロパティのstroke-dasharraystroke-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 に移動するように、@keyframesanimation を指定ましょう。

完成したコード(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;
  }
}

おわりに

SVGとCSSを使った手書き風テキストアニメのレシピを2回に分けて紹介しました。

SVGの破線とマスクをの使い方を理解できれば、アニメーションでロゴやイラストを描画したり、JavaScriptでトリガーを指定したり、さまざまな場面で応用できそうですね!

今日も最後までお読みいただき、ありがとうございました。

かわいいアニメつくりたい〜

アバター画像

ぽちっとおうえん!

シェア

  • Facebook
  • LINE
  • X
Swiperが動かない、動きはするけどカクついたり表示位置がズレたりする時の原因と対処法 Prettierを開発環境に組み込む