- Web制作ネタ帳
writer / むーみん
意外に簡単！滑らかSVGアニメーションをつくってみよう！
webデザイナーのむーみんです。
動きのあるサイトって一目置いちゃいますよね。
そんな動きのあるサイトによくみかけらるようになったSVGアニメーション。
最近SVGのアニメーションにはまっています★
まだまだSVGアニメーションを勉強中ですが、今回は簡単なSVGを使ったアニメーションをちょこっと紹介します～！
対応ブラウザはこちら
複数のSVGを作成
まず、変化させたいSVGを作成します。
今回は、丸、四角、三角を作成し、変化させていきます。
ここで注意しておきたいのが、Pathの構造を揃えておくこと！
SVG
<svg id="circle" data-name="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 318.84058 318.84058"><defs><style>.cls-1{fill:#fb8384;}</style></defs><title>circle</title>
<path class="cls-1" d="M 50,0
C 77.6,0 100,22.4 100,50
100,77.6 77.6,100 50,100
22.4,100, 0,77.6, 0,50
0,22.4, 22.4,0, 50,0
Z"/></svg>
SVG
<svg id="square" data-name="square" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#1b9dd1;}</style></defs><title>square</title><path class="cls-1" d="M 0,0
C 50,0 50,0 100,0
100,50 100,50 100,100
50,100 50,100 0,100
0,50 0,50 0,0
Z"/></svg>
SVG
<pre class="html"><code><svg id="triangle" data-name="triangle" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#249b3a;}</style></defs><title>triangle</title><path class="cls-1" d="M 25,50
C 37.5,25 37.5,25 50,0
75,50 75,50 100,100
50,100 50,100 0,100
12.5,75 12.5,75 25,50
Z"/></svg>
SVGファイルをアニメーション用に作成
「d=”~”」の箇所を「value=”~”」にいれます。
pathの区切りは、「;」で区切ります。
図形をひとつのファイルに＋アニメーションさせたコード↓
SVG
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlinks">
<path fill="#fb8384" d="M 0,0 C 50,0 50,0 100,0 100,50 100,50 100,100 50,100 50,100 0,100 0,50 0,50 0,0 Z;">
<animate
attributeName="d"
dur="3s"
repeatCount="indefinite"
values="M 0,0
C 50,0 50,0 100,0
100,50 100,50 100,100
50,100 50,100 0,100
0,50 0,50 0,0
Z;
M 0,0
C 50,0 50,0 100,0
100,50 100,50 100,100
50,100 50,100 0,100
0,50 0,50 0,0
Z;
M 25,50
C 37.5,25 37.5,25 50,0
75,50 75,50 100,100
50,100 50,100 0,100
12.5,75 12.5,75 25,50
Z;
M 25,50
C 37.5,25 37.5,25 50,0
75,50 75,50 100,100
50,100 50,100 0,100
12.5,75 12.5,75 25,50
Z;
M 50,0
C 77.6,0 100,22.4 100,50
100,77.6 77.6,100 50,100
22.4,100, 0,77.6, 0,50
0,22.4, 22.4,0, 50,0
Z;
M 50,0
C 77.6,0 100,22.4 100,50
100,77.6 77.6,100 50,100
22.4,100, 0,77.6, 0,50
0,22.4, 22.4,0, 50,0
Z;
M 100,0
C 100,50 100,50 100,100
50,100 50,100 0,100
0,50 0,50 0,0
50,0 50,0 100,0
Z;"/>
<animate
attributeType="XML" attributeName="fill"
dur="3s" repeatCount="indefinite"
values="#1b9dd1; #249b3a; #fb8384" />
</path>
</svg>注意点
- 注意しなければいけないのが、アニメーション開始時と終了時のpath要素(d属性の内容)の形式（コマンドの種類や数）が一致していなければいけないので、path要素に変更しなければいけなかったりします。
- もし、コマンドの種類や数が一致していなければ、コマ送りのようにカクカクなり、滑らかな動きにはならないので文字列を理解していないとイラレで書き出すよりツールやjsを使う方が良いかもしれません。
参考サイト
以下サイトを参考にさせていただきました。
「10分でわかるSVG 応用編」サンプル
circle要素を使わずに正円を描く方法と、負荷軽減策
Pathを理解すればすごく簡単に出来るので今後も使えそうです！
全くはじめて挑戦する方は、まずSVGの文字列を理解したほうが良いかもしれませんね。うまくいかない場合は、Snap.svgに頼るのもありです。Pathを揃えてくれるのでアニメーションがもっと簡単にできちゃいます。
まだまだ、SVG勉強中なので、次回もまたレビューしますー。
