Bookmark手書き風フォントのテキストをどうしてもシュバババっと動かしたくなって、SVGでアニメーションさせた時に苦戦したメモ。手書き風文字アニメーションって?準備するものテキストSVGを用意する書き順のSVGをつくるSVGを2つに分けるマスク用SVGアニメーション用SVGSVGを動かすdurationdelayおわりに手書き風文字アニメーションって?こんなやつです。フォントが手書き風なので書き順にアニメーションするとカッコいい。これってWebで表現するのなかなか難しい。Google先生にあれこれと聞いた結果、今回はこちらの記事を参考にさせていただきました。SVGでハンドライティングアニメーションを実装するまず実際に作ったデモはこちら。手書き風アニメーションのDEMOブラウザ対応に関しては以下になっています。準備するものテキストSVG書き順に動かすパスを引いたSVGJavaScript(anime.jsやTweenMaxなどのアニメーションライブラリ)SVG2つとJavascript。この3つがあればできます。JavaScriptは準備というよりは仕上げみたいな感じですね。ひとつずつ用意していきましょう。テキストSVGを用意するここから実際の作業になります。シュバババっと動かしたい手書き風のフォントで書いたテキストをIllustratorを使ってSVGで書き出します。今回DEMO用に用意したのはこちら。躍動感があって非常に動かしたくなる字体ですね。こちらは個人・商用問わず利用可能のフリーフォントになります。Fonthttps://freedesignresources.net/playlist-free-font/Illustrator上で文字ツールを使ってテキストを打ちます。単語は今回弊社の社名になっていますが、別のフォントを使って日本語にしても構いません。(単語が違う場合、後述のアニメーション調整の部分がちょっとだけ変わってきます)フォントの大きさもご自由に。出来上がったテキストをアウトライン化しておきます。書き順のSVGをつくる先ほど作ったテキストの上にレイヤーを作り、ペンツールで書き順に沿ってパスを引いていきます。このパスを動かすことでアニメーションを作るので、こちらがメインの作業になります。全ての文字が書き順のパスで塗りつぶされるように微調整しながら作ります。作業しやすいように下の文字レイヤーをロックし、ペンツールは塗りをなし、線をお好きな色で不透明度を60%くらいに設定。線の太さを調整して文字が隠れるくらいにパスを作っていきます。僕は線がカクカクだとやりにくかったので線パネルでパスの線端を角丸にして作業しました。ここでポイントを2つ。1文字ずつパスを作る参考サイトのように英字の筆記体でほぼ全部の文字が繋がっている場合は問題ないのですが、今回使うフォントの場合は1文字ずつ文字が離れています。文字によってフォントの太さが変わったりするので1文字ずつ、できれば一筆書きでパスを作ります。一筆書きにした方が良い理由は、後でJavaScriptでアニメーションさせる時に1文字に1つのパスの方がアニメーションさせやすいことからです。このサンプルでは「H」や「E」などは一筆書きにすると他の文字と重なってしまう部分があったのでそれだけ分けました。直線を引かない2つ目のポイントはパスを直線にしないことです。理由は直線にするとSVGに書き出した時に<line>要素として書き出されてしまうためです。すべて<path>要素として書き出したいので、直線もペンツールで微妙にハンドル操作して曲線にすると良いと思います。参考サイトでは「複合パスに変換」を使うと良いと書いてありましたが、僕の環境ではその方法で書き順通りにアニメーションできませんでした。こんな感じのパスが引けたら準備おっけーです。(ペンツール全然慣れてない)そしてこのファイルをSVGに書き出します。書き出すときは「アセットの書き出し」を使うと非常に簡単です。書き出すレイヤーを全部選択し、optionキーを押しながらアセットの書き出しパネルにドラッグします。あとは書き出したいアセットを選んで書き出し設定からSVGでファイルを書き出します。出来上がったSVGはこんな感じです。・アニメーション用の2つに分けていきます。ソースが長くなりますが、実際のSVGを見ていきます。</g></g></svg>マスク用SVGわかりやすくコメントをつけましたが、マスク用パスと書いてある部分を抜き出して別のSVGファイルとして保存します。d="M530.32,131.37c-8.85,4.5-19.05,4.8-28.35,8.1a79.85,79.85,0,0,0-12.6,5.84c-2.4,1.21-4.35,2.1-6,4.35-.3.45-3.3,3.75-3.15,3.3a27.17,27.17,0,0,1-3.15,2.7c.75-.3,3-1.8,3.15-1.5.3,2-4.35,3.45-5.85,3.75-3.3.45-7.34-.45-8.4-4-1.49-5,2.56-10.5,5.7-13.64a14.63,14.63,0,0,1,5.1-3.45c2.25-1.05,5.1-1.05,6-3.45,0,.15.15-3.45.9-3.9a23.29,23.29,0,0,1-.6,3.15c.45-1.2.6-2.4,1.05-3.75a.28.28,0,0,1-.45,0c-.75-1.95,1.65-7.35,2.1-9.3.75-2.85,1.65-5.55,2.25-8.4A103.37,103.37,0,0,0,490.72,96c.6-5.7,2.25-11.25,3.75-16.65.3-.75,2.85-10.35,3.6-10.35.15,0-.45,2.1-.3,2.25.9-3,1.65-6,2.55-8.85-.15.15-1.2,2.4-1.2,2.1-.3-1.65,1.35-4.35,1.95-6l2.1-6.3a57,57,0,0,1,5.7-12.3c3.3-4.8,8-8.7,14-9a22.12,22.12,0,0,1,12,3.15c6.3,3.45,8.7,8.1,9.15,14.55.45,8-5,19.2-11.25,24-2.4,1.8-5.7,3.3-8.7,3-1.95-.15-4.35-1.2-3.15-3.45a1.12,1.12,0,0,0,.45-.45h-.15c0-.15,5.25-11.1,5.85-11,.15,0-1.8,4.8-1.8,5.1a100.92,100.92,0,0,0,5.7-14.55c.75-2.55,3-8.7,1.2-11.4-2-2.85-6.3.45-8.1,2.1-4.2,4.2-6.75,10.2-9,15.6,2.55-5.85,6.45-15.45,13.05-17.85,6.15-2.25,3.6,6.3,3,8.4.45-1.65,1.65-7.8-.75-8.55-2.85-.75-6.15,3.3-7.5,5.1-6.15,7.95-9.6,18.45-12.75,27.9-6.45,19.5-10.2,39.75-17.7,58.8,9.9-3,20.25-5.55,30.6-6.15a78.77,78.77,0,0,1,10.35.3C538.57,126.12,532.57,130.32,530.32,131.37Zm-53.25,24.29a.15.15,0,0,0-.15.15ZM497,75.87c1.2-3.9,2.55-7.5,4.05-11.1,4.65-10.2,8.85-26.7,20.85-29.7-4.8,1-8.4,3.75-11.55,8.1a61.35,61.35,0,0,0-8.7,17.1C500,65.52,498.37,70.62,497,75.87Zm12.6-4.05c-1.2,3.6-2.4,7.05-3.45,10.65l3.45-10.35Z"/></svg>こんな感じですね。viewBox属性・xmls属性は同じにしておきます。アニメーション用SVG次にアニメーション用。マスク用のパスを除いた残りのソースを少し変更します。mask="url(#clipMask)"></image></svg>まず<mask>要素を<defs>の中に作り、その中にアニメーション用のパスを全て入れます。mask要素にはclipMaskというidを付けておきます。</mask></defs>そして<defs>の外側に<image>要素を作成し、xlink:href属性に先ほど作ったマスク用SVGへのパスを設定(環境差があるので適宜調整してください)し、mask属性にurl(#clipMask)とします。mask="url(#clipMask)"></image>CSSも調整しておきます。strokeは#fff(白)にしておきます。イラレでパスを描く際に線端を角丸にした場合はstroke-miterlimitが設定されている場合がありますが、Firefoxではこのプロパティがあるとmaskの表示に不具合が出るのでコメントアウトするか削除します。*/</style>またこのあとのアニメーション調整のため、「H」と「E」の文字のパーツとなるpath要素にそれぞれpath-h、path-eとclassを振っておきます。...</mask>ここまでできたらアニメーション用のSVGをhtmlファイルに直接書いて表示すると下の画面のように文字がすべて表示される状態になります。最後にこれをアニメーションさせます。SVGを動かすいろんな方法がありますが、今回は簡単に使えるanime.jsを使って動かしてみたいと思います。});</script>anime.jsの基本的なラインドローイングアニメーションを利用したものです。anime.jshttps://animejs.com/documentation/#lineDrawingポイントはdurationとdelayの部分です。何も考えずにノーマルの設定を書いてみます。}});文字自体のアニメーションはできていますが、「H」と「E」の部分がなんか遅いというか違和感のある動きになってしまいました。これを調整していきます。300;},「H」はパスが3つに分かれているので、1つのパスを100msに調整して1文字で300msになるように調整します。「E」も同じくパスが2つなので150msとします。300;}ここで引数のiに入っているのはインデックス(要素の順番)になるので、delayをパスごとに少しずらします。「H」の2番目のパスと3番目のパス、「E」の2番目のパスをdurationから計算してずらします。(数学苦手なので割と力技)今回違う文字で作成した場合はここが違ってきます。うまく調整できました。これで完成です!手書き風アニメーションのDEMOシュバババっといい感じになりました!おわりに今回は参考サイトをもとに自分がやってみた方法の1つをメモしました。他にもいろいろとやり方があるので時間がある時にチャレンジしてみたいと思います。最初はAirbnbが出してる「lottie」でやってみようとしたのですが、AfterEffectsに慣れていないこともありうまく動かせず...。