JavaScriptライブラリTweenMaxでSVGアニメーションを扱う方法

svgOrigin（SVG描画域の原点）

SVG描画域の左上を原点として5秒かけて回転

TweenMax.to($element,5,{rotation:360, svgOrigin:"0 0"});

SVG描画域の左上を軸に回転しています。
transformOriginとsvgOriginで挙動の違いがあるのは、すごく便利かなぁと思っています。rotationだけではなくてxやy、その他のプロパティでも試してみてください。

viewBox、path、polygon、polyline

viewBox、path、polygon、polylineなどをアニメーションさせる場合は、変更前と後の配列を格納しておいて、updateのたびに代入することによってアニメーションさせることができます。

var points = [0,45.8,79.2,0,158.5,45.8];        //変更前の値を配列に格納
var toPoints   = [79.2,43.5,79.2,43.5,129.2];    //変更後の値を配列に格納
TweenMax.to(points, 0.5, toPoints);            //変更前と変更後を0.5秒かけてアニメーション
toPoints.onUpdate = function(){
    //配列に格納されているpointを代入
}

配列で格納した要素をアニメーションさせる場合は、下記リンクでわかりやすく説明してあったので参考にしてみてください。

• TweenLiteを使用して SVG polygon（polyline） を任意の形状へ変形アニメーションさせる方法 – Stronghold

  http://zxcvbnmnbvcxz.com/tweenlite-svg-polygon/

おわりに

ボタンや矢印の表現などのワンポイントでSVGアニメーションを使用したい場合、DOMアニメーションとSVGDOMアニメーションに対応できるTweenMaxはとても便利です。

TweenMaxで扱えるのはあくまでSVGアニメーション用なので、SVG描画に特化したライブラリの代わりにはなりません。アニメーションに合わせてSVGDOMの描画する数を増やす必要がある場合は、Raphael、Snap.svg、svg.jsなどのSVG特化のライブラリを使用したほうがいいですね。

作っているサイトに合わせて、適切なアニメーションライブラリを利用してみてください。
そんではっ。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。