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

づや


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

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

今日はアニメーションさせるときに便利なTweenMaxの使い方について書きたいと思います。
こちらのスピードテストのページを見るとわかるように、かなりハイパフォーマンスなアニメーションが可能です。
というわけで、基本的な使い方を書いていきたいと思います。

とりあえず要素を動かしてみよう

まずは公式ページからダウンロードしましょう。
慣れないうちはTweenMax.jsを、とりあえず以下のように読み込んでおきましょう。

<script src="js/TweenMax.min.js"></script>

基本的によく使うクラスとして、以下の4つがあります。

  • TweenLite
  • TweenMax
  • TimelineLite
  • TimelineMax

Tween系とTImelite系の2種類がありまして、それぞれMaxが高機能版だと考えてよいかと思います。
単純に要素を動かすにはTween系を使用します。
idがblock1のTopを1秒かけて100pxまで動かしたい場合は、以下のように書きます。

// セレクタ、秒数(ミリ秒じゃないです、秒です)、プロパティです
// 戻り値でTweenMax オブジェクトがもらえます。のちにいろいろ使えます。
TweenMax.to("#block1" , 1 , {top:"100px"});

// jQueryだとこうですね
$("#block1").animate({top:"100px"} , 1000);

これで動かすことができます。けっこう簡単です。

Tween系でよく使う関数

上記で紹介したようにtoで動かすだけなら可能ですが、他にもいろいろな機能がありますので、よく使うものを紹介していきます。
公式のドキュメントには全部載っています。)

要素を動かすto

先ほども紹介しました、to()です。
引数は3つ渡せて、対象の要素(セレクタかオブジェクト。jQueryオブジェクトでもよい)、実行速度(秒)、プロパティや諸々です。
よく使う形で紹介します。

TweenMax.to("block1" , 1 , {
  top : "100px" , // CSSのプロパティ(+=とかも使えます)
  delay : 0.5 , // 実行までの待ち時間です
 ease : "Linear" , // イージングです。後述しますがTweenMax独自のイージングもあります。
  onComplete : function(){} , // 処理完了後に呼ばれる関数を指定できます。
  onStart  : function() {} , // 処理開始前に呼ばれる関数を指定できます。
  onUpdate : function() {} // 処理実行中に呼ばれる関数を指定できます。動作しつつ
});

ちなみにこの関数に限らず、対象要素は配列で複数指定できます。[obj1,obj2]みたいなのを渡すと2個に対して動作します。

独自のイージングはこちらで見ることが可能です。

他のプロパティ設定系でも同様ですが、CSS3にもけっこう対応しています。後はbackgroundColorなどのjQueryのデフォルトのanimateでは不可能な指定も可能だったりします。
こちらのほうにある程度まとまっています。

要素のstyleを設定するset

要素を指定し、styleを設定します。
jQueryでいうところのCSSになります。
引数は2つ渡せて、対象の要素、設定するプロパティです。

// 対象の要素、プロパティ
TweenMax.set("#block1" , {top:0 , scale:1});

要素の初期状態を指定しつつ動かすfromTo

toとやることはほとんど一緒ですが、要素を動かす前の最初の状態を指定できます。
引数は、対象の要素、実行時間、初期状態のstyle、プロパティ諸々です。

TweenMax.fromTo("#block1" , 1 , 
  {left:0 , opacity:0} , // left 0、opacity 0の状態を指定
  {left:"100px" , opacity:1} // left 100px、opacity 1まで変化させる
);

配列に対して時間差で動作させるstaggerTo(staggerFromTo)

配列を対象の要素として渡し、同じプロパティの指定を、指定した秒毎に動作させることができます。
引数は、対象の要素、1個の実行時間、プロパティ諸々、1個ずつの間、全部の完了イベントです。

<span class="move_string">A</span>
<span class="move_string">B</span>
<span class="move_string">C</span>
<span class="move_string">D</span>
<span class="move_string">E</span>

こんなHTMLがあったとして、↓のように指定します。

// move_stringクラスの要素を0.5秒かけてopacityを1にする。0.2秒毎に実行される
TweenMax.staggerTo(".move_string" , 0.5 , {opacity:1} , 0.2)

// 初期状態も指定できるstaggerFromToの方だと↓のような感じですね
TweenMax.staggerFromTo(".move_string" , 0.5 , {opacity:0} , {opacity:1} , 0.2)

// 全部実行した後に特定の処理をしたい場合は↓のような感じで
TweenMax.staggerTo(".move_string" , 0.5 , {opacity:1} , 0.2 , function(){
   // なんらかの処理
})

※全部実行した後のイベントに渡せるパラメータなどがあったりしますが、今回は割愛します。

動作を途中で止めるpause

動作を途中で止めることができます。
jQueryで言うところのstop()になります。
引数は、止めた後の秒数、イベントを呼ぶかどうかのtrue/falseとなります。


// 動作させた後戻り値のオブジェクトを保持しておきます。
var tween = TweenMax.to("#move" , 5 , {top:"250px" , left:"250px"});

// 任意のタイミングで止めます
tween.pause(); // 引数を指定しないとその場で止めます。

// 動作をとめつつ、最後の動作まで行いたい場合は↓のようにします。
tween.pause(5); // 若しくはtween.pause(tween.totalDuration()); とか

// 動作をとめつつ最初に戻したい場合は↓のような感じ
tween.pause(0);

まとめ

けっこうざっくりまとめましたが、基本的なところは紹介できたのではと思います。
まだまだ機能はいっぱいありますので、よければ公式ドキュメントを(英語ですが)読んでみてください。

次回はTimeLine系を紹介できればと思います。それでは。

※この記事を書いた時はver1.4.2です。

 

【づや(CTO)の話】

Pixi.jsを初めて触って簡単にアニメーションを作成してみた話(その1)

Pixi.jsを初めて触って簡単にアニメーションを作成してみた話(その2)

Pixi.jsを初めて触って簡単にアニメーションを作成してみた話(その3)

弊社CTO「づや」がLINEスタンプになりました。

おめでとう!!LIG社長、岩上貴洋が結婚しました。

づや
この記事を書いた人
づや

取締役

おすすめ記事

Recommended by