こんにちは。新米エンジニアの小木です。春ですね。桜が今年も綺麗に咲いておりました。そんなメガネのことは置いておいて今回はSVGアニメーションについて描いていきたいと思います。
SVGとは??
SVGとは… ですが自分が新米エンジニア小木の議事録 vol.2 (svgについて)にてSVGについてわかりやすくまとめましたのでそちらをご覧ください！
上記の記事を見ていただくとphotoshopでのSVG画像の書き出し方がわかるかと思います。そのSVG画像を今回はコードで操作しかっこいい動きをさせちゃおう!!って回です。
SVGアニメーションとは??
まずSVG画像はピクセルに色を塗っているのではなく計算式に基づいて画像が表示されています。なのでSVG画像をテキストエディタにドラッグアンドドロップすると不思議な文字＋馴染みのあるタグなどが見えてくると思います。
例えば以下の画像、SVG画像をブラウザで開いた時の画像です。（以下の画像はSVG画像ではありません）
この画像をテキストエディタで開くと以下のようになります。
（※photoshopで生成した時とillustratorで生成したときでコードが若干ですが異なります。以下はphotoshop使用時）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <svg id="test.svg" xmlns="http://www.w3.org/2000/svg" width="384.031" height="507.062" viewBox="0 0 384.031 507.062"> <path id="f" class="cls-1" d="M379.676,173.747c-1.371-77.43-30.6-140.72-69.584-102.107C296.3,85.3,288.805,111.694,275.141,125.749c-12.57,12.935-28.25,14.6-42.928,14.517-29.722-.169-64.278-20.074-73.2,42.177-6.077,42.387,29.027,69.417,20.453,110.228-2.676,12.748-10.994,22.177-17.826,30.132-16.971,19.759-29.606,36.738-42.169,64.815-23.524,52.54-25.194,77.016-16.969,110.1,8.92,35.869,42.27,69.536,69.945,52.712,33.2-20.172,30.058-63.232,67-85.524,31.175-18.824,40.667,21.535,52.358,54.554,22.05,62.284,64.888,59.907,94.059,5.852,9.5-17.611,25.717-56.092,22.507-81.3-2.591-20.342-20.056-32.614-28.517-46.391-29.761-48.457,20.232-65.868,46.452-83.67,25.058-17.007,65.458-51.989,52.113-115.1-4.579-21.654-36.506-41.032-49.373-33.484C410.845,176.061,380.2,203.7,379.676,173.747Z" transform="translate(-97.5 -59.469)"/> </svg> </body> </html>
この上記の数列＋タグを色々操作しSVGアニメーションを行っていきます。
実際にやってみよう
実際にSVG画像を表示して動かしてみましょう。まず上記のコードをコピーし新たに作成したhtmlのbody内に張り付けます。そうすると以下画像のように表示されるかと思います。それからcssで装飾していきます。
- ・fll – 色
- ・stroke – 幅
- ・stroke-dasharray – 周期
- ・stroke-dashoffset – 開始位置
が主な指定になります。
.cls-1 {
fill: #e60039;
}
上記プロパティでは図形中身を塗りつぶすようになっております。今回では中身が赤くなります。
次に塗りつぶしを透明にして、線の色を紫にします。
.cls-1 {
fill: transparent;
stroke: #d032d6;
}
ここまで来ると色々なことができるんじゃないかとわくわくしてきますよね！
SVGアニメーション
さてここからはkeyframeを使用して本格的にSVGアニメーションを記述していきます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@-webkit-keyframes test {
0% {
stroke-dashoffset: 2000;
fill: transparent;
}
80% {
fill: transparent;
}
90% {
stroke-dashoffset: 100;
}
100% {
stroke-dashoffset: 0;
fill: #e60039;
}
}
.cls-1 {
fill: #e60039;
stroke: #d032d6;
stroke-dasharray: 2000;
stroke-dashoffset: 0;
stroke-width: 1;
animation: test 4s ease-in 0s;
}
</style>
</head>
<body>
<svg id="test.svg" xmlns="http://www.w3.org/2000/svg" width="384.031" height="507.062" viewBox="0 0 384.031 507.062">
<path id="f" class="cls-1" d="M379.676,173.747c-1.371-77.43-30.6-140.72-69.584-102.107C296.3,85.3,288.805,111.694,275.141,125.749c-12.57,12.935-28.25,14.6-42.928,14.517-29.722-.169-64.278-20.074-73.2,42.177-6.077,42.387,29.027,69.417,20.453,110.228-2.676,12.748-10.994,22.177-17.826,30.132-16.971,19.759-29.606,36.738-42.169,64.815-23.524,52.54-25.194,77.016-16.969,110.1,8.92,35.869,42.27,69.536,69.945,52.712,33.2-20.172,30.058-63.232,67-85.524,31.175-18.824,40.667,21.535,52.358,54.554,22.05,62.284,64.888,59.907,94.059,5.852,9.5-17.611,25.717-56.092,22.507-81.3-2.591-20.342-20.056-32.614-28.517-46.391-29.761-48.457,20.232-65.868,46.452-83.67,25.058-17.007,65.458-51.989,52.113-115.1-4.579-21.654-36.506-41.032-49.373-33.484C410.845,176.061,380.2,203.7,379.676,173.747Z" transform="translate(-97.5 -59.469)"/>
</svg>
</body>
</html>
上記cssを書きますと以下のGIF画像のように動きます。（実際はカクカク動かずなめらかに動きます。皆様のローカル環境で上記コードを試してみてくださいませ。）
まとめ
SVGアニメーションどうでしたでしょうか。今回は単純に線が動き中身が塗りつぶされるという動きだけでしたがもっと色々な動きができると思いませんか？是非皆さんSVGをもっと操作してみてください！
