SVGアニメーションでマスクした写真をぷるぷる動かす方法

HTML・CSS

ちょっと凝った動きをつけたいけど、Canvasでガリガリ書くのはちょっと・・
という方に是非お勧めしたいのがSVGアニメーション！
SVGはXMLをベースとした2次元ベクターイメージなので拡大縮小が自由というのも魅力の一つ。

このTipsNoteのロゴで弊社のキャラクターTAMくんが動いているのもSVGアニメーションによるものです。
今回はそんなSVGで、マスクした画像のフチをぷるぷる動かすサンプルを作ってみたいと思います。

完成デモ＞＞

素材を作成

まずはIllustratorでぐねぐねした枠(A)を書きます。
続いて(A)を複製し、パスの数は変えずに枠の凹み具合などを変えた(B)を作成します。
これだけでも枠を動かすことは可能ですが、2つだけだと動きが単調になってしまうので
今回は4パターンの異なる枠(A〜D)を用意しました。

用意ができればそれらをSVG形式に保存して準備完了です！

「別名で保存」からファイル形式の「SVG」を選択して「保存」をクリック
オプションは気にせずそのままでOK！

枠を動かしてみよう

先ほど書き出したSVGを開いて見てみると下記のようになっているかと思います。

今回重要なのはpathの中にある赤枠のd="M〜"という箇所で、
これが先ほど作った枠の座標になっています。

この座標を用意した枠分＜animate＞タグ内のvalues=""に、
";"で区切って繋げてやるだけで枠を動かすことが可能です。
（リピートさせたいので最初に入れた座標を必ず最後にもう一度入れておいてください）

<svg fill="#00266D" x="0px" y="0px" width="225px" height="225px">
   <path>
    <animate dur="1s" repeatCount="indefinite" attributeName="d" attributeType="XML" values=" M148.145,9.644c0,0,67.558,14.52,68.826,85.875c5.361,17.995,5.048,44.192-12.947,73.24c-27.153,36.303-45.461,60.927-120.283,49.25 C44.91,206.33,9.555,170.965,4.185,126.138C5.766,75.629,23.439,49.11,41.122,36.163C61.958,21.957,78.372-3.303,148.145,9.644z; M148.145,9.644c0,0,63.855,3.356,65.826,81.875c0.471,18.771,3.77,53.917-14.273,82.935C172,219,158.563,221.686,83.741,210.008 C44.91,198.33,6.185,171.286,6.185,126.138C6.185,68,23.318,40.947,41,28C61.836,13.793,78.372-3.303,148.145,9.644z; M152.5,10c0,0,45.5,3.5,56,82.5c5.509,35.141,10.197,66-1,84.5c-25,35.5-40,56.5-128,32c-66-17.5-72.315-37-72.315-83.861 C7.185,107.951,0,43.5,41.5,26.5C66,15,83.5,0.5,152.5,10z; M148.145,14.644c0,0,64.467,7.837,66.438,86.356c0.471,18.771,3.55,40.683-14.884,69.454C175,209,163,213.012,83.741,210.008 c-43.003-1.63-79.557-46.722-79.557-91.87C4.185,57.333,20.318,41.947,38,29C61.91,12.698,75.297,1.127,148.145,14.644z; M148.145,9.644c0,0,67.558,14.52,68.826,85.875c5.361,17.995,5.048,44.192-12.947,73.24c-27.153,36.303-45.461,60.927-120.283,49.25 C44.91,206.33,9.555,170.965,4.185,126.138C5.766,75.629,23.439,49.11,41.122,36.163C61.958,21.957,78.372-3.303,148.145,9.644z">
    </animate>
    </path>
</svg>

【 アニメーションの属性 】（任意で変更してください）

dur="1s"　アニメーション時間　1ループ1秒間で動かす
repeatCount="indefinite"　リピート回数　indefiniteだと無制限

たったこれだけで枠線をプルプル動かすことができました！
枠線を動かしたデモ＞＞

写真をマスクして完成

ここまで出来れば、あとは簡単。
＜clipPath＞を追加しid名を設定したら、
＜image＞タグでマスクしたい画像と先ほどのid名を指定すれば完成です！

<svg x="0px" y="0px" width="225px" height="225px">
   <clipPath id="frame">
       <path>
            <animate dur="1s" repeatCount="indefinite" attributeName="d" attributeType="XML" values=" M148.145,9.644c0,0,67.558,14.52,68.826,85.875c5.361,17.995,5.048,44.192-12.947,73.24c-27.153,36.303-45.461,60.927-120.283,49.25 C44.91,206.33,9.555,170.965,4.185,126.138C5.766,75.629,23.439,49.11,41.122,36.163C61.958,21.957,78.372-3.303,148.145,9.644z; M148.145,9.644c0,0,63.855,3.356,65.826,81.875c0.471,18.771,3.77,53.917-14.273,82.935C172,219,158.563,221.686,83.741,210.008 C44.91,198.33,6.185,171.286,6.185,126.138C6.185,68,23.318,40.947,41,28C61.836,13.793,78.372-3.303,148.145,9.644z; M152.5,10c0,0,45.5,3.5,56,82.5c5.509,35.141,10.197,66-1,84.5c-25,35.5-40,56.5-128,32c-66-17.5-72.315-37-72.315-83.861 C7.185,107.951,0,43.5,41.5,26.5C66,15,83.5,0.5,152.5,10z; M148.145,14.644c0,0,64.467,7.837,66.438,86.356c0.471,18.771,3.55,40.683-14.884,69.454C175,209,163,213.012,83.741,210.008 c-43.003-1.63-79.557-46.722-79.557-91.87C4.185,57.333,20.318,41.947,38,29C61.91,12.698,75.297,1.127,148.145,14.644z; M148.145,9.644c0,0,67.558,14.52,68.826,85.875c5.361,17.995,5.048,44.192-12.947,73.24c-27.153,36.303-45.461,60.927-120.283,49.25 C44.91,206.33,9.555,170.965,4.185,126.138C5.766,75.629,23.439,49.11,41.122,36.163C61.958,21.957,78.372-3.303,148.145,9.644z">
            </animate>
        </path>
   </clipPath>
<image clip-path="url(#frame)" height="100%" width="100%" xlink:href="img/tam.jpg" />
</svg>

完成デモ＞＞
※デモではマウスオーバー時の動きをCSSで追加しています。

いかがでしたでしょうか？
SVGは少しクセがあるので慣れるまで調整に時間がかかるかもしれませんが
面白い動きが実装できるので是非色々試してみてください。