SVG画像をアニメーションさせる時は、CSSを使用するのが一般的かと思いますが、SVGファイルに直接記述してアニメーションさせることもできます。
SMILという名前の、SVGのアニメーション機能です。IEでは使用できなかったため、使いづらかったのですが、今後は気後れすることなく使用できます。
SMILにはざっくり3種類のアニメーションがありますが、複雑なのでまずは簡単なキーフレームアニメーションから、早速試してみましょう。
静止画のSVG
アニメーションを作成する前に、まず静止画のSVGを用意して、中身を見てみましょう。
SVGファイルをエディタで開くと、下記のようになっています。
これにアニメーションの指示を追加していきます。
|
1 2 3 4 |
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400px" height="400px"> <path fill-rule="evenodd" fill="rgb(216, 111, 152)" d="M201.289,399.988 C201.289,399.988 -131.414,139.793 58.695,13.64 C153.242,-35.664 199.836,72.378 199.836,72.378 C199.836,72.378 248.694,-36.919 340.976,13.64 C531.83,146.68 201.289,399.988 201.289,399.988 " /> </svg> |
このpathタグの中のd属性が、パスのデータになります。方法は後述しますが、このd属性を操作するので、「d=”XXXX”」の記述がある状態にしてください。
|
1 |
d="M201.289,399.988 C201.289,399.988 -131.414,139.793 58.695,13.64 C153.242,-35.664 199.836,72.378 199.836,72.378 C199.836,72.378 248.694,-36.919 340.976,13.64 C531.83,146.68 201.289,399.988 201.289,399.988 " |
▲ ハート型を表すd属性の値。d属性があればpathタグでもcircleタグでも構いません。
＜d属性がない場合＞
IllustratorでSVGを作成するとd属性が無い場合があるので、下記のサイトでファイル圧縮を試してみてください。
Compressor.io – optimize and compress JPEG photos and PNG images
基本のアニメーション
animateタグを追加する
では早速、簡単なアニメーションを作ってみましょう。animateタグを使うと、pathの属性値を操作するアニメーションを作成することができます。
まずはコピペで良いので、下記のanimateタグをpathタグの中に記述してみてください。
|
1 2 3 4 5 6 |
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400px" height="400px"> <path fill-rule="evenodd" fill="rgb(216, 111, 152)" d="M201.289,399.988 C201.289,399.988 -131.414,139.793 58.695,13.64 C153.242,-35.664 199.836,72.378 199.836,72.378 C199.836,72.378 248.694,-36.919 340.976,13.64 C531.83,146.68 201.289,399.988 201.289,399.988 "> <animate attributeType="XML" attributeName="fill" dur="3s" from="0" to="rgb(255, 255, 150)" repeatCount="indefinite" /> </path> </svg> |
▲ pathタグは単一だったので、終了タグ（</path>）を追加します。開始タグ末尾の”/”を削るのを忘れずに。
これでパスの色が変わります。
各属性を解説すると、下記のようになります。
|
1 2 3 4 5 6 7 8 |
<animate attributeType="XML" //XML or CSS どちらを操作するか記述する attributeName="fill" //アニメーションさせたい属性名を記述する 今回は色の操作なのでfill dur="3s" //1回のアニメーションに何秒間かけるか from="rgb(216, 111, 152)" //アニメーション開始時の値 to="rgb(255, 255, 150)" //アニメーション終了時の値 repeatCount="indefinite" //繰り返しの回数 indefiniteは無限 /> |
CSSアニメーションを作ったことがある方であれば、おおよその感覚はすぐ掴めると思います。
秒数や色の値を編集して再度表示してみると、また違ったアニメーションが作成できると思います。
キーフレームアニメーション
先程は開始と終了の2点を指定したアニメーションでした。
次に、中間の色を追加してみましょう。
|
1 2 3 4 5 6 7 |
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400px" height="400px"> <path fill-rule="evenodd" fill="rgb(216, 111, 152)" d="M201.289,399.988 C201.289,399.988 -131.414,139.793 58.695,13.64 C153.242,-35.664 199.836,72.378 199.836,72.378 C199.836,72.378 248.694,-36.919 340.976,13.64 C531.83,146.68 201.289,399.988 201.289,399.988 " > <animate attributeType="XML" attributeName="fill" dur="3s" values="rgb(216, 111, 152);rgb(150, 200, 255);rgb(255, 255, 150);" repeatCount="indefinite" /> </path> </svg> |
animateタグの記述が変わりました。values属性の中に、セミコロン区切りで3つの値が入っています。これでピンクから水色を経由して、黄色に変わるアニメーションになります。
|
1 |
values="rgb(216, 111, 152);rgb(150, 200, 255);rgb(255, 255, 150);" |
▲ valuesを使うときはfrom属性とto属性は不要になります
値をセミコロンで区切れば、いくつでもキーフレームを追加できます。
|
1 |
values="rgb(216, 111, 152);rgb(150, 200, 255);rgb(150, 150, 255);rgb(255, 255, 255);rgb(255, 255, 150);" |
▲ 5つの値をセミコロン区切りで繋げました。
パスが変形するアニメーション
キーフレームアニメーションの応用です。
valuesにd属性の値を挿入すると、パスを滑らかに変形させることができます。
まず静止画でアニメーション開始時点のパスと、終了時点のパスを作ります。
作成時の注意として、パスのポイントの数はどちらも同じにします。開始の時に4つであれば、終了時も4つです。ポイントの数を変えてしまうと上手に動かないので注意してください。
開始時点
|
1 2 3 4 |
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="374px" height="310px"> <path fill-rule="evenodd" fill="rgb(216, 111, 152)" d="M189.999,307.999 C189.999,307.999 -129.110,314.729 60.999,187.999 C155.546,139.271 194.999,0.0 194.999,0.0 C194.999,0.0 219.717,139.16 311.999,188.999 C502.106,322.4 189.999,308.999 189.999,308.999 "/> </svg> |
終了時点
|
1 2 3 4 |
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="374px" height="310px"> <path fill-rule="evenodd" fill="rgb(216, 111, 152)" d="M189.999,307.999 C189.999,307.999 -129.110,314.729 60.999,187.999 C155.546,139.271 194.999,0.0 194.999,0.0 C194.999,0.0 219.717,139.16 311.999,188.999 C502.106,322.4 189.999,308.999 189.999,308.999 "/> </svg> |
開始時点のpathタグのd属性と、終了時点のpathタグのd属性に注目してください。
これらの値をコピペして、キーフレームアニメーションとしてvaluesの中にセミコロン区切りで記述します。すると、それだけで間のアニメーションは自動で補完されます。簡単ですね。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400px" height="400px"> <path fill-rule="evenodd" fill="rgb(216, 111, 152)" d="M201.289,399.988 C201.289,399.988 -131.414,139.793 58.695,13.64 C153.242,-35.664 199.836,72.378 199.836,72.378 C199.836,72.378 248.694,-36.919 340.976,13.64 C531.83,146.68 201.289,399.988 201.289,399.988 " > <animate attributeType="XML" attributeName="d" dur="3s" values=" M201.289,399.988 C201.289,399.988 -131.414,139.793 58.695,13.64 C153.242,-35.664 199.836,72.378 199.836,72.378 C199.836,72.378 248.694,-36.919 340.976,13.64 C531.83,146.68 201.289,399.988 201.289,399.988; M189.999,307.999 C189.999,307.999 -129.110,314.729 60.999,187.999 C155.546,139.271 194.999,0.0 194.999,0.0 C194.999,0.0 219.717,139.16 311.999,188.999 C502.106,322.4 189.999,308.999 189.999,308.999;" repeatCount="indefinite" /> </path> </svg> |
▲ 先程はfill属性を操作しましたが、次はd属性を操作するので「attributeName=”d”」に設定します。
終了後に逆再生の動きで元に戻したい場合は、valuesの最後に最初と同じ値を挿入します。
|
1 2 3 4 |
values=" M201.289,399.988 C201.289,399.988 -131.414,139.793 58.695,13.64 C153.242,-35.664 199.836,72.378 199.836,72.378 C199.836,72.378 248.694,-36.919 340.976,13.64 C531.83,146.68 201.289,399.988 201.289,399.988; M189.999,307.999 C189.999,307.999 -129.110,314.729 60.999,187.999 C155.546,139.271 194.999,0.0 194.999,0.0 C194.999,0.0 219.717,139.16 311.999,188.999 C502.106,322.4 189.999,308.999 189.999,308.999; M201.289,399.988 C201.289,399.988 -131.414,139.793 58.695,13.64 C153.242,-35.664 199.836,72.378 199.836,72.378 C199.836,72.378 248.694,-36.919 340.976,13.64 C531.83,146.68 201.289,399.988 201.289,399.988;" |
SMILを使用すればパスを操作できるので、CSSとはまた違った動作が可能です。アプリの中で使用することもできるので、表現の幅が広がります。是非試してみてくださいね。
