svgラインアニメーションを使おう

さて、皆さんsvg使ってますか？
少しとっつきにくいsvgですが、使えると表現の幅が広がります。
今回は、簡単に使えるsvgラインアニメーションをご紹介します。

svgの詳しい仕様についてはW3Cのドキュメントを読むと良いです。

See the Pen text animation line by yabonary (@mtbk4919naoki) on CodePen.

See the Pen text animation line and fill by yabonary (@mtbk4919naoki) on CodePen.

本記事の注意点

svgアニメーションはIE11に対応していません

IEでSVGアニメーションを見せたい場合はsvg.jsなどのSVG操作系ライブラリを使用することになります。
javascriptでアニメーション制御をするとコストが高くなるので、IEではアニメーションが見えなくてもいいように、フォールバックを表示するのがベターかと思います。

svgの埋め込み方

svgの埋め込みには4つの方法があります。

objectを使用する方法
imgを使用する方法
cssを使用する方法
インラインsvgを使用する方法（本記事）

本記事ではインラインsvgを使用します。
svgファイルの中身はどれも共通なので、見る分にはインラインsvgがわかりやすいです。
同じsvgを複数の場所で使用する場合は、後述するobjectを使用した埋め込みなどを行いましょう。

objectを使用する方法

<object id="hoge" type="image/svg+xml" data="hoge.svg" width="200" height="200"></object>

objectを使用する方法では、以下のようにしてクラスを操作します。

var  svgObject = document.getElementById('hoge').contentDocument, // svgオブジェクトを取得
     svg = svgObject.getElementsByTagName('svg')[0]; // svg要素を取得

svg.classList.add('start'); // startクラスを追加

imgを使用する方法

<img src="hoge.svg" width="200" height="200" alt="">

imgで埋め込んだ場合は後からクラスやスタイルの操作ができません。

cssを使用する方法

.icon {
  background: url('hoge.svg') center center /contain no-repeat;
}

こちらもimgを使用した場合と同様に、後からクラスやスタイルの操作ができません。

インラインsvgを使用する方法

<svg xmlns="http://www.w3.org/2000/svg"
     width="100" height="70" viewBox="0 0 100 70">
  <rect x="1" y="1" width="98" height="68" fill="none" stroke="#ccc" stroke-width="1"/>
  <circle cx="50" cy="35" r="20" fill="#f00" />
</svg>

svgを書き出してテキストエディタで開くとこんな感じになってます。
これ、実はHTMLに直書きして大丈夫です。
ここにクラスやスタイルを追加していくことでアニメーションします。

文字の輪郭をなぞるラインアニメーション

See the Pen text animation line by yabonary (@mtbk4919naoki) on CodePen.

SVGのtext要素を使っているので、文字情報を保持したままアニメーションできます。

解説

strokeは線の色を指定します。
stroke-widthは線の太さを指定します。
stroke-dasharrayは破線の間隔を指定します。
stroke-dashoffsetは破線の開始位置をずらします。

ポイントはstroke-dasharrayの設定です。
実際は破線なのですが、間隔を広げることで実線に見えるようにstroke-dasharrayを設定します。
長すぎず、短すぎずが重要です。

以上を踏まえたら、あとは通常のCSSアニメーションと同様になります。

@keyframesでアニメーションの定義を行います。

0%の時点ではstroke-dasharray（破線の間隔）と同じ分だけstroke-dashoffset（破線の開始位置）があるので、ちょうど線がない状態です。

これが100%になると、stroke-dashoffset（破線の開始位置）が0になるので、今度は全てに線がある状態になります。

とても長い間隔の破線を押し出すようなイメージです。

アニメーションの開始タイミング制御

アニメーションの開始タイミングはjavascriptで制御します。
svg要素にstartクラスがついた時に開始する仕組みです。

今回は読み込み後すぐに開始させていますが、実際にはin-view.jsなどを使って、画面の表示領域に入ったら開始するようにします。

ファーストビューで使う場合はjavascriptで制御する必要はありません。
svg要素にclass=”start”を追加すれば読み込まれ次第アニメーションします。

in-view.js

文字の輪郭をなぞった後、塗りつぶすアニメーション

See the Pen text animation line and fill by yabonary (@mtbk4919naoki) on CodePen.

解説

fillは塗りつぶしの色を指定します。

animationに変更を加えました。
線でなぞった後に、fillをtrasnparentから#000に変化させています。

お気づきかと思いますが、svgは色を後から変更することができます。
これもsvgを使用するメリットの一つです。

ストロークフォント的アニメーション

ここまでラインアニメーションの話をしてきました。
しかし、正直なところ線の一本一本を描くようなアニメーションがやりたいのであって、アウトラインをなぞってほしいわけではない、という方も多いのではないかと思います。

それ、やり方あります。
でも下処理が少し面倒です。

See the Pen lineAnimation by vivus-instant by yabonary (@mtbk4919naoki) on CodePen.

コードサンプルだけ置いていきます、詳しい作り方は次回！