JavaScriptのアニメーション用ライブラリ「TweenMax」。

2016.04.19 / Notes

高機能アニメーション用ライブラリ「TweenMax」を使ってみました。
JavaScriptによるアニメーションのライブラリはいくつかありますが、その中でも「TweenMax」はパフォーマンスも高く、機能も豊富です。
サンプルはこちら

単純なアニメーションであれば、下記のように書くことができます。

//TweenMax.to(要素, 秒数, プロパティ);
TweenMax.to("#box1", 1, {scale:2});

1 2	//TweenMax.to(要素, 秒数, プロパティ); TweenMax.to("#box1", 1, {scale:2});

もう少し複雑なアニメーションの場合には、TimelineLiteクラスを利用したほうが良いかもしれません。

var tl = new TimelineLite();
tl.to("#box2", 1, {scale:2}).to("#box2", 1, {rotation:90}).to("#box2", 1, {scale:1});

1 2	var tl = new TimelineLite(); tl.to("#box2", 1, {scale:2}).to("#box2", 1, {rotation:90}).to("#box2", 1, {scale:1});

TimelineLiteクラスでは、メソッドチェーンで連続したアニメーションを作成できます。

上記では「TweenMax」「TimelineLite」を使っていますが、その他に「TweenLite」「TimelineMax」があります。
名称の通りMaxが付く方が全機能版で、Liteは軽量版になります。
SVGやCanvasにも使えるので、アニメーションの作成には重宝しそうです。