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

おじいちゃん


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

こんにちは、おじいちゃんです。
週末になるとよく銭湯に行くのですが、いつも「なんでシニア券を買えないんだろう」とずっと考えながら湯に浸かっています。もしかしたら、おじいちゃんじゃないのかもしれません。

さて、JavaScriptのアニメーションライブラリであるTweenMaxがSVGに対応したので、TweenMaxでSVGを扱う方法について書きたいと思います。
以下のスライドもぜひ参考に。

 
TweenMaxの使い方については、づやさんが細かく書いているので参考にしてみてください。

SVGDOMのプロパティを変更

それでは、さっそくSVGDOMの操作方法について記載していきます。

sample01

<rect id="rect" x="50" y="50" width="100" height="100" fill="#91e600" />

 

TweenMax.to($element,0.5,{attr:{x:100,y:150});

指定した要素のx,y座標がアニメーションで変化していますね。viewBoxの指定方法については、後述します。

原点を固定してアニメーション

transformOriginとsvgOriginを使ったアニメーション方法について説明します。
CSSで用いられるtransform-originは、要素の原点を変更することができるプロテパティです。

TweenMaxでも同じように各要素の原点を指定する場合は、transformOriginに値を渡すことで原点を変更することができます。
TweenMaxではtransformOriginとは別にsvgOriginを使用することで、SVG描画域の原点を指定し、その原点を軸にアニメーションさせることができます。

わかりやすくrotate(TweenMaxでの指定方法はrotation)を使用して、要素を回転させてみます。

transformOrigin(要素の原点)

指定した要素の中央を原点として5秒かけて回転
sample02

TweenMax.to($element,5,{rotation:360, transformOrigin:"50% 50%"});

描画した各要素が自身の中央に原点を持ち、回転していますね。

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特化のライブラリを使用したほうがいいですね。

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

おじいちゃん
この記事を書いた人
おじいちゃん

フロントエンドエンジニア

関連記事