SVGとCSS3を使った線画によるテキストのアニメーションの方法が紹介されていました。

想像していたよりも、ずっと簡単にできることがわかりました。

こちらの方法を少し応用して筆記体のアニメーションをやってみましたので、

ご紹介いたします。

 

↓参考にさせていただいたサイト

SVG線画が美しいリッチアニメーションの作り方

 

↓作ってみたもの

DEMO

 

方法

基本的な方法・手順は参考サイトと一緒です。

1. Illustratorを使い、筆記体のフォントを、ペンツールを使って一筆書きのパスとしてトレースする

Illustratorでモデルとなる筆記体のフォントでテキストを配置し、ペンツールでトレースします。

このとき、パスは途中で切らずに、一筆書きの状態になるよう、1つのパスでトレースします。

 

 

ただ、実際の筆記体のように、t, fの横線は別のパスとして作成し、

iの点の部分は星形のパスとして作成しました。

 

2. SVG形式で保存し、HTMLに配置する

「ファイル」→「別名で保存」でファイル形式としてSVGを選択し、保存します。

書き出したSVGファイルをテキストエディタなどで開き、<svg></svg>の中のテキストをコピーし、

HTMLに配置します。

配置したらSVGの中のパスそれぞれに適当なclass名を設定して、CSSで操作できるようにしておきます。

今回は、筆記体の本体にpath、t, fの横線にそれぞれline, lin2、iの点の部分にする星形にstarというclass名を割り当てました。

 

3. CSS3で設置したSVGにアニメーションをつける

SVGのCSSは基本的には通常のCSSとはプロパティが異なってきます。

SVGの場合は、SVGで各要素に設定する属性名がそのままプロパティ名となります。

例:

 

それを念頭に置いて、参考サイトの方法をもとにアニメーションをつけます。

こちらでは、stroke-dasharray(破線の間隔)とstroke-dashoffset(破線の開始位置)というSVGのプロパティを利用して、線画のアニメーションを実現しています。

参考サイトではパスの分かれた文字それぞれについてアニメーションしていますが、

パスを一つにつなげることで、筆記体のアニメーションを実現することにしました。

線が長くなるので、 stroke-dasharrayとstroke-dashoffseの値を大きくしています。

さらに、筆記体の本体を書き終えた後に、t, fの横線とiの点の部分に相当する星形を、animation-delayを使って遅れて描画させます。

これで完了です。

 

その他参考サイト

SVGによるベクターグラフィック(1)(4/6):JavaScriptによるHTML5プログラミング入門