アニメーションに便利なJavaScriptライブラリTweenMaxを使ってみる（その2）

こんにちは、CTOのづやです。

前回はTwenn系の使い方について紹介しましたが、今回はTimeline系の使い方について紹介していきたいと思います。

こちらには読んで字の如く、いろいろいろいろなアニメーションをタイムラインで管理できる機能がそろっています。
非常に便利なので個人的によく使っております。

基本的な使い方

タイムラインオブジェクトを作り、行いたいイベントを追加していくイメージです。
下記のような感じが基本的な構成になるでしょうか。

// タイムライン作る
    var tl = new TimelineMax();

    // idがmoveのtopを250pxにする動作を0秒後に呼ぶ
    tl.add(TweenMax.to("#move" , 5 , {top:"250px"}), 0);

　　// idがmoveのleftを250pxにする動作を5秒後に呼ぶ
    tl.add(TweenMax.to("#move" , 5 , {left:"250px"}) , 5);

作ったタイムラインに対し、動作と何秒後に動くかを設定していきます。

setTimeoutを駆使するより、コードのほうが直観的でわかりやすいのではないでしょうか。
以下、私がよく使う機能に関して書いていきたいと思います。

コンストラクタ

newした際に呼ばれるあれですね。このときにいろいろパラメータを渡すことが可能です。
その中でもよく使うものは以下になります。

var tl = new TimelineMax({
   paused : true , // デフォルトはfalseです。trueにしておくと明示的に呼んであげるまで動作しません。
   onComplete : function(){} , // 処理完了後に呼ばれる関数を指定できます。
   onStart  : function() {} , // 処理開始前に呼ばれる関数を指定できます。
   onUpdate : function() {} // 処理実行中に呼ばれる関数を指定できます。 
});

ホバーしたら、クリックしたら、というように条件に応じて特定のアニメーションをさせたいことが多いので、pausedをしょっちゅうtrueにして使っている気がします。

要素を動かすto、fromTo、staggerTo

1番最初に書いた例では、addを使用してTweenMax.toのtweenを渡していますが、その辺りはラップしてくれているので、関数が用意されています。

// タイムライン作る
var tl = new TimelineMax();

// こんな感じで指定できます。
tl.to("#move" , 5 , {top:"250px"}, 0);
tl.to("#move" , 5 , {left:"250px"} , 5);

この辺りは、実行の秒数を指定できる以外は前回で解説した該当の関数と同じ挙動ですので、そちらをご参照いただければと思います。

独自の処理を呼ぶcall

「toとかじゃないんだ、このタイミングで独自の処理を呼びたいんだ！」ということもあるかと思います。
そんなときはcallを使います。
引数は、関数、渡したいパラメータ(配列で指定)、渡した関数のスコープ、何秒後に実行するかになります。

var tl = new TimelineMax();

// 特にパラメータを渡さず、2秒後に関数を呼ぶ
tl.call(function(){} , null , null , 2);

// 引数にaを渡しつつ、関数内のスコープは呼び出し元にしときつつ、2秒後に関数を呼ぶ
var a = 1;
tl.call(function(arg){} , [a] , this , 2);

作ったタイムラインを呼び出す、play()、pause()、reverse()

作ったタイムラインを呼び出す用の処理になります。
それぞれ動作を開始する秒数を指定できたりします。

// 動作を開始させる。
tl.play();

// 動作を一時停止させる
tl.pause();

// 逆順で動作させる
tl.reverse();

まとめ

いかがでしたでしょうか。

基本的に使うものはこんなところかと思います。
ラベルをつけるなど他にもできることは多いですが、また別の機会に紹介できればと思います。それでは。

【JavaScriptアニメーション】

※ 要素を立体的に回転させて動かすエフェクトTURNBOX.jsの実装方法

※ SVGとjQueryで絵を描いているようなアニメーションを実装する方法

※ jQuery UIを利用して要素をドラッグアンドドロップさせてみる

※ IEでも再現可能！簡単にエフェクトがきいたホバーボタンを作る方法

※ select要素（セレクトボックス）の装飾に使えるプラグイン3選

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