むーみん意外に簡単!滑らかSVGアニメーションをつくってみよう!webデザイナーのむーみんです。動きのあるサイトって一目置いちゃいますよね。そんな動きのあるサイトによくみかけらるようになったSVGアニメーション。最近SVGのアニメーションにはまっています★まだまだSVGアニメーションを勉強中ですが、今回は簡単なSVGを使ったアニメーションをちょこっと紹介します~!対応ブラウザはこちらhttp://caniuse.com/#search=SVG%20animation複数のSVGを作成まず、変化させたいSVGを作成します。今回は、丸、四角、三角を作成し、変化させていきます。「d=”~”」の箇所を「value=”~”」にいれます。pathの区切りは、「;」で区切ります。注意しなければいけないのが、アニメーション開始時と終了時のpath要素(d属性の内容)の形式(コマンドの種類や数)が一致していなければいけないので、path要素に変更しなければいけなかったりします。コマンドの種類や数が一致していなければ、コマ送りのようにカクカクなり、滑らかな動きにはならないので文字列を理解していないとイラレで書き出すよりツールやjsを使う方が良いかもしれません。参考サイト以下サイトを参考にさせていただきました。応用編」サンプルcircle要素を使わずに正円を描く方法と、負荷軽減策Pathを理解すればすごく簡単に出来るので今後も使えそうです!全くはじめて挑戦する方は、まずSVGの文字列を理解したほうが良いかもしれませんね。うまくいかない場合は、Snap.svgに頼るのもありです。Pathを揃えてくれるのでアニメーションがもっと簡単にできちゃいます。SVG勉強中なので、次回もまたレビューしますー。声お問い合わせNORENは、株式会社のれんの登録商標です。弊社は、株式会社のれんと提携しNOREN製品をご提案・ご提供しております。