vol.8(SVGアニメーションについて)Tweetこんにちは。新米エンジニアの小木です。桜が今年も綺麗に咲いておりました。そんなメガネのことは置いておいて今回はSVGアニメーションについて描いていきたいと思います。(svgについて)にてSVGについてわかりやすくまとめましたのでそちらをご覧ください!上記の記事を見ていただくとphotoshopでのSVG画像の書き出し方がわかるかと思います。そのSVG画像を今回はコードで操作しかっこいい動きをさせちゃおう!!って回です。SVGアニメーションとは??まずSVG画像はピクセルに色を塗っているのではなく計算式に基づいて画像が表示されています。SVG画像をテキストエディタにドラッグアンドドロップすると不思議な文字+馴染みのあるタグなどが見えてくると思います。以下の画像、SVG画像をブラウザで開いた時の画像です。(以下の画像はSVG画像ではありません)この画像をテキストエディタで開くと以下のようになります。(※photoshopで生成した時とillustratorで生成したときでコードが若干ですが異なります。-59.469)"/></svg></body></html>この上記の数列+タグを色々操作しSVGアニメーションを行っていきます。実際にやってみよう実際にSVG画像を表示して動かしてみましょう。上記のコードをコピーし新たに作成したhtmlのbody内に張り付けます。すると以下画像のように表示されるかと思います。それからcssで装飾していきます。開始位置が主な指定になります。#e60039;}上記プロパティでは図形中身を塗りつぶすようになっております。今回では中身が赤くなります。次に塗りつぶしを透明にして、線の色を紫にします。#d032d6;}ここまで来ると色々なことができるんじゃないかとわくわくしてきますよね!SVGアニメーションさてここからはkeyframeを使用して本格的にSVGアニメーションを記述していきます。-59.469)"/></svg></body></html>上記cssを書きますと以下のGIF画像のように動きます。(実際はカクカク動かずなめらかに動きます。皆様のローカル環境で上記コードを試してみてくださいませ。)まとめSVGアニメーションどうでしたでしょうか。Blog小木さんアクトゼロのエンジニアです。RESERVED.ページTOPへ戻る。