当サイトでもファーストビューでロゴタイプのアニメーションに使っているのですが、タイポグラフィのアウトラインがアニメーションとなって描かれるようなものになります。過去記事「XML形式のデータ編集でパスを変形させるSVGアニメーションを実装」では直接XML形式のデータを編集して、パスの変形を行いましたが、今回はパスにCSSでアニメーションをつけていきたいと思います。
パスのアウトラインを描くアニメーション
CSSではパスの変形など、直接オブジェクトの形を変えることはできないのですが、移動や色を変えたりとCSSで行えるものは応用することができます。ここではパスのアウトラインをアニメーションをつけて描いていきます。タイポグラフィに適用するので手書きで文字が書かれているように見せることができます。
具体的なアプローチとしては、SVGのパスアウトラインをCSSのアニメーションを使って操作していくことになりますが、あまり見かけないプロパティもたくさん登場するので合わせて見ていきたいと思います。
SVGのパスをCSSで編集するときによくつかうプロパティ
SVGをCSSで操作するときには、普段のコーディングではあまり使用しないプロパティが出てきます。以下では今回つかうものを中心にまとめました。
| fill |
パスの塗りを指定します。16進数やrgbaのカラーコードなどで指定します。 |
| stroke |
線の色を指定します。同じく16進数やrgbaのカラーコードなどで指定します。 |
| stroke-width |
線の太さを指定します。pxやemなどの単位で指定できます。 |
| stroke-dasharry |
破線にした時の実線と間隔の大きさを指定します。小さいと点線に、大きくなるにつれて長い破線になっていきます。 |
| stroke-offset |
線が始まる基準の位置を指定します。パスの外周からはみ出した分は非表示となります。 |
今回のアニメーションのポイントとして、stroke-dasharryとstroke-offsetを理解しておく必要があります。stroke-dasharryとstroke-offsetを同じ値にすると全ての線がパスの外周からはみ出すことになりますので、パスが表示されていない状態になります。このstroke-offsetの位置をアニメーションでずらしていくことにより、順にアウトラインの線が表示されるように見せるので、まるで手書きで文字を書いているような動きとなります。
animationプロパティと@keyframeの設定
そして、動きのメインとなるanimationプロパティとキーフレームについても見ていきます。animationプロパティはアニメーションの詳細設定を、キーフレームは経過進捗に対しての設定を入れていく形になります。
CSSでは同じようなものにtransitionプロパティもありますが、微妙に違うのと、animationプロパティは数も多いので、まずはこれらを頭に入れておくことが大切です。
| animation-name |
キーフレーム設定を紐つけるためのラベルの役割をします。分かりやすい名前をつける方がいいでしょう。 |
| animation-duration |
アニメーションにかかる時間を設定します。この時間がアニメーション開始から終了までの時間になります。 |
| animation-timing-function |
イージングを設定します。easeやease-in、ease-in-outから、ベジェ曲線の座標での指定もできます。 |
| animation-delay |
アニメーションを遅延させる時間を設定します。ここに設定した時間が経過したらアニメーションが実行されます。 |
| animation-iteration-count |
アニメーションを繰り返す回数を指定します。infiniteの場合は無限にアニメーションが繰り返されます。 |
| animation-direction |
アニメーションの再生方向を指定します。通常再生（normal）、逆再生（reverse）、交互再生（alternate）などが指定できます。 |
| animation-fill-mode |
アニメーション終了時の状態を指定します。forwardsを設定することでアニメーション終了時の状態でおいておくことができます。 |
| animation-play-state |
アニメーションを一時停止にすることができます。再生中（running）か一時停止（paused）が指定できます。 |
また、これらのプロパティは上から順にanimationプロパティとしてショートハンドで記述することができます。
// 例
animation: 5s ease-in 0.2s infinite alternate none running;
SVGをCSSアニメーションで操作する
ではコードの方も見ていきます。まずは過去記事
「XML形式のデータ編集でパスを変形させるSVGアニメーションを実装」で紹介した時と同じようにインラインでHTMLにSVGのオブジェクトを用意します。CSSで操作することになるのでIDやclassをpath要素に対して振っておきます。
【HTML】※一部抜粋
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="100" viewBox="0 0 300 100">
<g>
<path id="anim_obj" d="M4.30254328,37.9489877 C6.90671408,38.00………80,39.436892 Z">
</path>
</g>
</svg>
CSSでは先ほどのsvgにあるpathのスタイル指定を行なっていきます。上記であげたプロパティを参考にデザインに合わせていきます。またキーフレームも合わせて用意しておきます。キーフレームも表現したいアニメーションに合わせておきます。
【CSS】※一部抜粋#
#anim_obj {
stroke: #000;
stroke-width: 1;
stroke-dasharray: 3000;
stroke-dashoffset:3000;
fill: rgba(0,0,0,0);
animation: ANIM 5s ease-in-out 0s infinite alternate none running;
-webkit-animation: ANIM 5s ease-in-out 0s infinite alternate none running;
}
@keyframes ANIM {
0% {
stroke-dashoffset: 3000;
}
100% {
stroke-dashoffset: 0;
fill: rgba(0,0,0,1);
}
}
@-webkit-keyframes ANIM {
0% {
stroke-dashoffset: 3000;
}
100% {
stroke-dashoffset: 0;
fill: rgba(0,0,0,1);
}
}
ポイントとなるのはキーフレームの0%つまりアニメーション開始時にstroke-dashoffsetをstroke-dasharrayと同じ値に設定しておきます。そして、終了時にstroke-dashoffsetが0になるようにすることで、パスに沿ってアウトラインが描かれていきます。
これで確認してみるとSVGのパスが手書きで描かれるように見せることができます。ロゴタイプなどのテキストに適用されるデザインがよく見られる通り相性がいいかもしれないですね。今回の
サンプルはこちらにあげておりますので参考にご利用ください。プラグインなどもいろいろありますが、自前で実装するのもそこまで大変ではないので一度試して見てはいかがでしょうか。
（参考にさせて頂いたサイト様）
線や塗りなど描画が美しいSVGアニメーションの作り方
CSSアニメーション 入門
categories