少し前になりますが、6月15日に勉強会「【ヒカ☆ラボ】SVGアニメーションで始めるマイクロインタラクション」に参加してきました。
登壇者の鹿野先生のお話のわかりやすいこと…！初心者の私でもできそうな気がして、ポートフォリオに入れたいな、作品に使いたいな、と妄想ばかり膨らませておりました。
そしてついに今（遅ればせながら 汗）試してみたので、ここでまとめてみたいと思います。勉強会の復習も兼ねております。
ちなみに、鹿野先生が勉強会でお話された内容を、ご自身でまとめて公開されていますので（これもまたとても分かりやすい）、ぜひご覧ください！
SVGで始めるマイクロインタラクション入門
UI改善にキラリと役立つ！今こそ導入したいSVGアニメーションの作り方まとめ
なぜSVGアニメーションにトライしたか
SVGアニメーションとの出会い（認識）は、おそらくいくつかのWebサイト上で、スルスルっとペンを走らせるかのようなアニメーションを見たことだと思います。
当初それが何なのか、までは考えなかったと思いますが、Webデザインに触れていく中で「あぁ、あれはSVG画像のアニメーションなのね〜」と気づきました。
こういった滑らかな描写はSVGを用いたアニメーションだからなのかな、と。表現の一つとして、とても魅力的に感じたのが勉強のきっかけです。
またアニメーションがなくとも、SVG形式の画像はデバイスの解像度に依らずに綺麗に表示される、というのはとても魅力ですよね。
ぜひともうまく使えるようになっておきたいです。
SVG画像の作り方
今回は、Webサイトのロゴやメインビジュアルのキャッチコピーなどに使うことを想定して、文字のアニメーションを作ります。
まずは静止画を作成して、表示するところから。
鹿野先生によると、SVG画像は以下の3通りの作成/入手方法があるとのこと。
- SVGのコードを手で記述する
- ベクター画像を作成できるツール（Illustratorなど）で書き出す
- 素材サイトなどから入手
1は、単純な丸とか四角とかの図形ならできそうですが、凝ったものは難しそう…。
3は思い通りのものが見つかれば有用ですが、せっかくIllustratorが使えるので、今回は2の方法を選択し、Illustratorで画像を作成することにします。
なお、コードで表示するとIllustratorのレイヤーごとにidが振られ、またそれをまとめる親レイヤーにもidが振られるのですが、これはIllustrator上で設定したレイヤー名が反映されるので、後々id名となることを念頭に置いて命名しておく必要があります。日本語とか、あとで自分が識別できない名前をつけないよう注意です。
作成したものをSVG画像として保存するには、保存形式を選択する際に「SVG」を指定します。簡単！
これでSVG画像ファイルができました。
ブラウザでSVG画像を表示する
作成したSVG画像ファイルをHTMLに組み込みます。
これも方法が2つあるとのこと。
- imgタグで外部ファイルとしてリンク
- SVGのコードを直接HTMLに記述する
1は、JPEGとかPNGとかと同じようにsrcにパスを書けば、同じように表示されます。簡単！（本日2回目、まだ余裕）
2は、初めての私は若干戸惑いましたが、この方法を使うとコード上でパスや塗りやらを操作できます。アニメーションもこちらで行います。
SVG画像ファイルを、テキストエディタで開きます。と、こんな感じのものを見ることができます。
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="hello" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1000 400" style="enable-background:new 0 0 1000 400;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
</style>
<g>
<path id="h" class="st0" d="M352.4,214.8c9.2,4,14,10.8,15.6,17.6c0.8,3.2-0.4,5.2-4.4,4.4c-6.4-1.2-14-1.6-22.4-1.2
c-13.6,26-27.6,54.8-40.8,84.8c-1.6,4-4.4,4.4-6.8,0.8c-5.6-8-9.2-19.6-1.2-44c2.8-8,8.8-22,16.8-38.4c-29.2,3.6-60,8.8-78.8,8.8
c-12.4,24.8-24.8,51.2-36.4,78c-1.6,4-4.8,5.2-7.2,1.6c-6-8.4-8.8-19.6-2-44c2.4-8.4,9.2-22.8,17.2-40.8c-8.8-4-12-9.6-13.6-12.8
c-2.4-4.8-1.6-6.4,5.2-6c6,0.4,11.6,1.2,16.8,1.2c25.6-53.2,62.8-122.4,79.2-145.6c3.6-4.8,7.2-4,9.6,0.4c6,11.2,4.8,30.8-10,59.2
c-11.6,22.4-28,50.8-45.6,84c27.6-3.6,52.4-10.4,78.8-12c26-51.6,61.2-115.2,77.2-136.4c4-5.2,7.6-4.8,10,0.4
c5.6,11.6,4.4,30.4-12.4,60.4C385.2,156.8,369.6,183.6,352.4,214.8z"/>
<path id="e" class="st0" d="M424,316c33.2,1.6,62.4-30.4,79.6-56.8c2-3.2,5.2-3.2,6.8,0.4c1.6,3.2,0.4,14.4-6.8,24.8
c-16.8,24.4-47.6,42.8-78.4,43.2c-50.8,0.8-68.4-49.2-42.4-100.8s66.8-72.4,86.8-60.8c10,6,17.2,12,23.6,20.8
c7.2,9.6,4,34-12.8,54.4c-19.6,24-46.4,34.4-74.4,11.6C393.2,289.6,402.8,314.8,424,316z M457.2,224c12.8-16.8,21.6-37.6,16-42
c-8.4-6.8-41.6,17.2-60.4,55.2c-1.2,2.4-2.4,4.8-3.2,6.8C429.2,256.4,445.6,239.2,457.2,224z"/>
<path id="l1" class="st0" d="M534,315.2c19.2,1.6,47.2-27.2,62.8-58c2.8-5.2,7.2-5.6,8.8,0c2,6.4,0.4,15.2-4,24.8
c-5.6,12-34.8,45.2-66.8,44.4c-27.6-0.8-42.4-20-33.2-63.2c14.8-69.6,60.4-142,101.2-184.4c6-6.4,11.6-7.2,17.2-2
c11.6,10.4,14,25.2,9.2,44C616.8,170,572,218,536.4,241.2C520.4,280.4,516,313.6,534,315.2z M615.6,112.4
c-5.2-3.2-34.8,41.2-62.4,92.4c-3.6,6.4-6.8,12.8-9.6,19.2C598.4,179.6,620.8,115.6,615.6,112.4z"/>
<path id="l2" class="st0" d="M626,315.2c19.2,1.6,47.2-27.2,62.8-58c2.8-5.2,7.2-5.6,8.8,0c2,6.4,0.4,15.2-4,24.8
c-5.6,12-34.8,45.2-66.8,44.4c-27.6-0.8-42.4-20-33.2-63.2c14.8-69.6,60.4-142,101.2-184.4c6-6.4,11.6-7.2,17.2-2
c11.6,10.4,14,25.2,9.2,44C708.8,170,664,218,628.4,241.2C612.4,280.4,608,313.6,626,315.2z M707.6,112.4
c-5.2-3.2-34.8,41.2-62.4,92.4c-3.6,6.4-6.8,12.8-9.6,19.2C690.4,179.6,712.8,115.6,707.6,112.4z"/>
<path id="o" class="st0" d="M807.2,240.4c-8.4,34-33.6,74.4-63.2,84.4c-14.4,4.8-34.4,3.2-50.4-17.6c-17.6-23.2-11.6-58,6.4-90
c15.2-27.2,39.6-50.4,63.6-52c12.4-0.8,19.2,2.8,27.2,13.6c9.2,12.4,21.2,15.2,18.8,44c-0.4,3.2-0.4,6-0.8,9.2c2.4,0,4.8-0.8,8-0.8
c2.8,0,2.8,2,1.2,4C815.2,238.4,811.2,240,807.2,240.4z M773.2,230.4c-8.4-6.4-18-20.4-18.4-35.2c-10.8,9.2-22.4,22.4-30.8,37.6
c-16.8,30.4-22.8,67.2-12.4,76c11.2,9.2,35.6-4.8,55.2-41.6c6-11.2,10.8-22.4,14-32C778,234,775.6,232.4,773.2,230.4z M786.8,194.8
c-2-12.8-10-10.4-12,1.2c-2,10.8,2.4,22.4,8.8,28.4C786.8,212,788,202,786.8,194.8z"/>
</g>
</svg>
これがSVGのコードです。
ここから、svgの開始タグ〜終了タグまでをコピーして、htmlファイルの画像を挿入したい箇所に貼り付けます。
先ほど、Illustrator上でつけたレイヤー名がそのままid名になっています。
これで静止状態のSVG画像が表示されました！
アニメーションを設定する
ついにやってまいりました、アニメーションです…！
アニメーションを作成・設定する方法は多々あり、特に今回のようにSVG画像が手元にあってそれを動かしたい時は、
- CSSアニメーション
- SMIL
- JavaScript
が選択肢になる（あとはそもそも動画作成ソフトで作った動画を埋め込む方法になる）とのこと。
自分にとって一番とっつきやすいのはCSSなのですが、これにはIE11で動作しないというデメリットがあるそう…！
でもJavaScriptは結構ハードらしい…のですが、簡単に実装できるライブラリがあるということで、これを試しました！
VivusとSnap.svgを使う
Vivusは、線画を描くようなアニメーションを実装できるライブラリで、なんとコードは一行で済むという、私でもできそう感満載の正義の味方。
パスを描写してくれるものなので、アニメーション表示するSVG画像は当たり前ですが「線画」である必要がありますね。
Snap.svgはjQueryに似た書き方でアニメーションを操作することができるライブラリなので、jQueryは触ったことがある、という方なら抵抗なく使えそうです。
この2つを使って、「文字が縁取られた後に、中に色がついて完成」というアニメーションを作ります。
準備
なお、今回のSVG画像は塗りなしで書き出したため、書き出したSVGコードも「塗りなし」になっています。
.st0{
fill:none;
stroke:#000000;
stroke-miterlimit:10;
}
st0は全てのパスに共通してつけられたclass名。”fill:none”が「塗りなし」ですね。SVGコードを見るまでは使ったことのないプロパティ”fill”。
これがこのままだと、塗りを設定しても表示されないので、削除しました。また、そもそも塗りの設定のない画像なので、CSSで塗りを設定しました。
.st0 {
fill: #000;
fill-opacity: 0;
}
“fill-opacity: 0″は、塗りの不透明度0。デフォルトでは透明状態にしておいて、アニメーションで透明→不透明にしようということです。
ついに実装
書いたコードはこんな感じ。（これも鹿野先生のサンプルを参考に書いてみました、というかほぼ写させていただきました。鹿野先生様様。）
<script>
new Vivus('hello', {duration: 200}, function(){
Snap('#hello').selectAll('path').animate({
'fill-opacity': 1
}, 500)
});
</script>
Vivusでは、0.2秒かけて線画アニメーションをするように、と命令します。続けてSnap.svgをコールバックし、そこでは全てのパスに対して0.5秒かけて色を塗る（正確には、不透明度を0%→100%にすることで塗りを表示させる）よう命令します。
これで、SVGアニメーション完成！
DEMO
まとめ
書き出されたSVGコードに圧倒されたり、「アニメーションの実装」という少々手強そうなイメージに負けそうになりながらも、今回試してみて簡単に素敵なアニメーションが実装できることが分かりました！
何よりも、勉強会で分かりやすい説明を聞いて、分かりやすいデモとサンプルが手元にあって、という恵まれた環境だからこそ挑戦できました。先生本当にありがとうございます（涙）
また、もう1つ、とても参考にさせていただいたサイトがありましたのでここでご紹介。こちらは勉強会前にも予習で読ませていただき、今回の挑戦でも助けていただきました。
あざらしっく.net SVGアニメーションで失敗したことを踏まえて丁寧に！動くロゴの作り方
ちゃんとSVG画像でアニメーションができたので、これで安心して自分のサイトに組み込むことができます！
今回試した方法以外でもまた挑戦してみたいですね。