エンジニア採用セミナー
エンジニア採用セミナー
2015.07.08

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

おじいちゃん

svgOrigin(SVG描画域の原点)

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

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を代入
}

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

おわりに

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

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

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

  • 1
  • 2