前回はsvgラインアニメーションをご紹介しました。今回はsvgアニメーションを使ったストロークフォント風アニメーションです。CCとvivus-instantを使用して作ります。vivus-instantはsvgデータをドラッグアンドドロップするだけでラインアニメーション化してくれるサービスです。パスで作ったグラフをラインアニメーションにするのに便利なのですが、今回はこれを使用して文字をアニメーションにします。簡単な方法としては細いフォントをラスタライズして画像トレースする方法があるのですが、ガタガタになったり末端が汚くなったりします。そこで、今回はイラストレーターのブレンドを使用して文字の中心線を出します。Pゴシックなどの飾りが少ない角ゴシックでテキストを作成し、バラバラのアウトラインに変換します。mac:Cmd+J)」などを使用して、1画ずつに整理します。1画の四隅をはさみツールで切って削除。交差しているところははさみツールで切った後、パスの結合。線が足りないところはダイレクト選択ツールで伸ばしてあげる。最初は時間がかかりますが、慣れれば早くなります。パスの方向を揃える一画ずつに整理したら、「パスの方向反転(Alt>O>P>Enter>E)」で書く方向へ矢印の向きを揃えておきましょう。これをしておかないと、次のブレンドの工程で失敗します。パスの方向転換は機能の場所が深いので、アクションに登録しておくのもオススメです。ブレンドツールで文字の中心線を出すここまで来たらいよいよ文字の中心線を出します。ブレンドツールをダブルクリックしてブレンドオプションを出し、ステップ数を1に設定します1画を挟むパス2つをクリックしますオブジェクトからブレンドを拡張します1画を挟むパスを削除します必要に応じて、ダイレクト選択ツールで位置を調整しましょう中心線に線の太さを設定すればストローク化された文字に矢印をなしにして、線の太さを3~5pxに設定すればストローク化された文字になります。風の文字の見てもらうとわかるのですが、漢字でやろうとすると結構時間がかかります......。vivus-instantでアニメーション化vivus-instantのアニメーションは次のような性質があります。下のレイヤーから順番に描画されるパスの終点から支点へ向かって描画されるvivus-instant用に修正vivus-instantの性質を踏まえて、レイヤーの順番を整理し、パスの方向反転を行ってからsvgで書き出します。レイヤーが下から書き順になるように並び変えます全体を選択して「パスの方向反転(Alt>O>P>Enter>E)」をします線の太さ、位置や長さの最終調整svg形式で書き出しvivus-instantでアニメーション化vivus-instantを開いて、書き出したsvgファイルをドラッグ&ドロップします。左側のフィールドで設定を変えます。(後述)Updateを押してアニメーションを確認します。Donwloadを押してアニメーションsvgをダウンロードします。svgが読みこまれたときに自動的にアニメーションします。classが付与されたときにアニメーションします。下のレイヤーから順にDelayに設定されたミリ秒ずつ遅延してアニメーションします。すべてのレイヤーが同時にアニメーションします。下のレイヤーのアニメーションがが終わり次第、次のレイヤーのアニメーションが始まります。すべてのアニメーションが終わるまでの時間(ミリ秒)を設定します。アニメーションのイージングを設定します。onにすると、アニメーションが繰り返されます。サイトへ配置する配置方法とクラスの操作については前回の記事で説明した通りです。今回の例では要素取得用にsvgAnimationクラスを付与し、Javascriptでstartクラスを付与してアニメーション開始タイミングを制御しています。CodePen.IE11への対応について最後になりますが、IE11非対応というところが痛いです。IE11への対応については以下が詳しいので参考にしてみてください。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。