皆さん初めまして、こんにちは！WEBデザイナーの原です！

今回は、近年web上で見かけるSVGアニメーションについてお話ししようと思います。

「SVGアニメーション」と聞いて難しいのでは？と思われる方も多いと思います。ですので今回は、CSSのみを使用して簡単に実装できるSVGアニメーションをご紹介したいと思います。

SVGファイルの活用が多様化されている昨今、SVGに触れたことがない方もこの記事を読んで是非一度トライしてみてください！

そもそもSVGってなに？

目標

本記事での目標は、SVG画像を作成しSVGをcssアニメーションキーフレームを用いて動かすことを目標とします。

今回はよく見るアウトラインが描画されていくように見えるアニメーションを想定しています。

SVGファイルの作成方法って？

PhotoshopでもIllustratorでも、jpgやpngと同じようにアセット機能で書き出しができます。

今回はIllustratorで書き出しを行います。

１.ロゴの作成

まずは新規作成からアートボードを作成し、そこにアニメーションさせたいロゴを作成してください。

２.ロゴをアウトライン化

ロゴが完成したら、作成したロゴを全てアウトライン化してください。

・全選択（⌘＋A）→「書式」→「アウトラインを作成」（⌘＋shift＋O）

３.SVG形式で保存

「ファイル」→「保存」を選択します。（⌘＋S）

ファイルの保存画面が立ち上がったらファイルの種類の中から「SVG」を選んで保存してください。

４.SVGファイルの調整

・作成したSVGファイルには不要なデータが含まれているため、必要箇所のみを使用します。

・生成された<path>それぞれにアニメーションでタイミングをずらすための任意のclassを与える。今回は class=”fo1(パーツ順)” とする。

参考までに今回作成したSVG画像のソースを記載しておきます。

上記のSVGファイルを軽く説明します。

<svg>

<svg>SVGを格納するための要素です。

xmlns=”http://www.w3.org/2000/svg”

SVG名前空間宣言と呼ばれるものです。

viewBox=”x（左上のx座標）, y（左上のy座標）, width（画像の幅）, height（画像の高さ）”

こちらをSVGに正しく指定しておくことでレスポンシブ対応が可能になります。

<g>

オブジェクトをグループ化するためのタグ

<path>

d属性の中のパス図形を元に描画するタグ

アニメーションの仕組みを理解しよう！

SVGファイルが準備できたら、今度はCSSのアニメーションを記述していきます。

まずは、線が描画されていくSVGアニメーションの仕組みは一体どうなっているのでしょうか。

実は「線を描いていく」ためのメソッドやプロパティは今の所存在しません。

ではどのようにこのアニメーションを実現しているのかというと、

下記の「破線を指定するためのプロパティ」を応用して実現しています。

これら２つの値を時間に沿って変化させることにより実現している訳です。

それでは、その「仕組み」について理解していきましょう。

stroke-dasharray

stroke-dasharrayは、下図の通り破線と破線の間隔がそれぞれ【指定の数値】になるプロパティです。

まずは800pxの線分（id名:line）に対して、stroke-dasharrayを指定してみましょう。

#line {
 stroke-dasharray: 200px;
}

200pxの間隔の破線ができましたね。

（今回は分かりやすいように感覚部分をグレーにしています。）

stroke-dashoffset

ここで指定する数値は破線の開始位置がマイナス方向に指定した数値分ずれます。

試しにstroke-dashoffsetを100pxずらしてみます。

#line {
 stroke-dasharray: 200px;
 stroke-dashoffset: 100px;
}

つまり「破線の始まり」が開始位置から指定の数値分「隠れている」状態になりますね。

プロパティの性質が理解できたところで、

今度はstroke-dasharrayを線の幅分（800px）を指定してみます。

#line {
 stroke-dasharray: 800px;
}

そうすると線分の全長とピッチが同じになるため、見た目では「破線の間隔分だけ」が「隠れている状態」になるので、

そのままの線分が表示されているように見えます。

※この状態をAとします。

さらにstroke-dashoffsetにも同じく線の幅分（800px）を指定してみましょう。

#line {
 stroke-dasharray: 800px;
 stroke-dashoffset: 800px;
}

そうすると、ピッチは線分いっぱいのまま開始位置がマイナス方向に800px分ずれるため、

線は存在しているが、何も描かれていない状態に見える。

※この状態をBとします。

それでは、これらの「A」「B」をアニメーションで推移させてみましょう。

dasharray（破線のピッチ）の値を線の幅分（800px）に固定、dashoffset（破線の開始位置）を時間とともに変化させます。

＠keyframes で0％の時にdashoffsetを線の幅分（隠れている状態）にし、

100％の時にdashoffsetを0pxに指定することで0％〜100％にかけて

枠線が見えてくる＝「まるで線が描かれていく」ようなアニメーションになります。

See the Pen DEMO by JuntaHara (@juntahara) on CodePen.

ロゴのアニメーションを作ろう！

アニメーションの仕組みが理解できたところで、上記を応用して今回作成したロゴを実際に動かしてみましょう。

今回作成したロゴのsvgファイルに上記のアニメーションを加えとパスデータであるアウトラインが描画されていくアニメーションが実現できるという訳です。

See the Pen Untitled by JuntaHara (@juntahara) on CodePen.

次に、一文字ずつアニメーションのタイミングをずらす記述を書いていきます。

.fo1 {
    stroke: #111;
    stroke-width: 0.5px;
    stroke-dasharray: 400px;
    animation: svg 0.8s ease-in both, svg-color 2s ease-in both;
    animation-delay: 0s, 3s;
}
.fo2 {
    stroke: #111;
    stroke-width: 0.5px;
    stroke-dasharray: 400px;
    animation: svg 0.8s ease-in both;
    animation-delay: 0.3s;
}

あらかじめpathごとに振り分けておいたclass名に上記のように

animation-delay（アニメーションが開始されるまでの時間）でアウトラインが描画されるまでの時間をずらします。

只、このままでは最後の「塗り」のタイミングがバラバラになってしまうため塗り用の@keyframeを追加し、

塗りのアニメーションはその中で推移するようにし、animationに塗りのタイミングを複数指定します。

複数指定する方法

See the Pen svg-demo02 by JuntaHara (@juntahara) on CodePen.

最後に、今回作成したSVGロゴアニメーションがこちらになります。

皆さんもこの記事を見て、一度SVGアニメーションを作成してみてください。

まとめ

今回の記事を書くにあたって、調べてみてどうしてこのプロパティでこの動きになるのか、の疑問に対して

そのプロパティの仕様を深ぼり全体の仕組みを紐解く事がアニメーションの肝だと思いました。

次回の記事では、SVGアニメーションを使った他の表現方法（拡大縮小・回転など）を応用した動き等、

さらにSVGを活用したアニメーションを深掘りしてみたいと思います。