TweenMaxでアニメーションさせる

Pocket

最近お仕事でTweenMaxというJavascriptのアニメーションライブラリを使用する案件があったので、それについて書こうと思います。

TweenMaxについて

公式ページ

Flashを使っていた人にはおなじみのライブラリのようですね。
サンプルページを観ていただければわかるかと思いますが、結構リッチな動きが可能です。

今までは簡単なものであればjQueryでアニメーションを書くことが多かったのですが、TweenMaxのほうが、シンプルに書けます。
また、docsの情報が結構しっかりしている上に開発者の人も結構、頻繁にアップしているのも魅力的の一つです。

今回は基本的な使い方もふまえ簡単なサンプルをあげてみたいと思います。

クラス

使用できるクラスは4つあります。

  • TweenLite
  • TweenMax
  • TimelineLite
  • TimelineMax

TweenとTimelineとがありそれぞれに軽いLite版と拡張版のMax版とがあるといった構成です。

詳しい使い方・違いについてはチートシートがあるのでそちらをどうぞ。
2015年8月現在の最新版チートシート

以下、公式にあがってる、サンプルを元に書き方について簡単にとりあげていきます。

ファイルのロード

jQueryに依存はしてないので、単体での使用もOKです。

最新のTweenMaxを読み込み

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

個別で読み込み

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>

全部入りで、こんなにもいらないという場合や、スマホ用に軽くしたいというときであれば、個別に指定できます。

CSSPluginはDOM要素のスタイルをアニメーションさせたいとき用に
EasePackはイージング関連、
TweenLiteはアニメーションのコアといった具合になります。

TweenLite

アニメーションの基本的なコアとなるもので、DOM要素のスタイルをアニメーション化させることができます。

//書き方
TweenLite.to(ターゲット, 秒数, プロパティ値);

//サンプル
var obj = document.getElementById("obj"),
    tween = TweenLite.to(obj, 2.5, {left:"100%"});

jQueryのanimationと同じように、CSSのプロパティを指定するだけで、CSSアニメーションできます。
jQuery同様、プロパティ値が複数ある場合は,(カンマ)で区切ります。

サンプル

See the Pen jPgpBd by matsui (@matsui) on CodePen.

TweenMax

TweenLiteを拡張したもので、 repeat/yoyo/stagger などを指定できます。

//repeat
TweenMax.to(logo, 1, {left:"300px", repeat:1});

//yoyo
TweenMax.to(logo, 1, {left:"300px",repeat:1, yoyo:true});

//stagger
TweenMax.staggerTo([red, yellow, green, blue, pink, purple], 1, {scale:0.2, opacity:0.3}, 0.25);

TimelineLite

タイムラインとして制御し、タイミングを管理できます。
この辺りは、jQueryだけだとややこしい処理なのですごくありがたいですね。
(その分少し重いというのはありますが…)

//タイムラインインスタンスを作成
var tl = new TimelineLite();

//トゥイーンを追加
tl.to(element, 1, {width:"50%"});

//他の配列で指定されたトゥイーンを追加
tl.to(element, 1, {height:"300px", ease:Elastic.easeOut});

//前のトゥイーンの終わりと、新しい者との間に隙間があるので、0.75秒の次のトゥイーンをオフセット
tl.to(element, 1, {opacity:0.5}, "+=0.75");

//次のトゥイーンをオーバーラップ
tl.to(element, 1, {backgroundColor:"#FF0000"}, "-=0.5");

//60度の回転に3つの要素をアニメーション化。0.2秒ごとに開始時間をずらす
tl.staggerTo([e1, e2, e3], 1, {rotation:60}, 0.2);

//myFunction()を呼び出し
tl.call(myFunction);

//タイムラインを制御
tl.pause();
tl.resume();
tl.restart();
tl.reverse();
tl.play();

//2.5秒後にジャンプ
tl.seek(2.5);

//再生スピードを遅く
tl.timeScale(0.1);

//myLabelという名前のラベルを追加
tl.add("myLabel", 3);

//myLabelにトゥイーンを追加
tl.add( TweenLite.to(element, 1, {scale:0.5}), "myLabel");

//myLabelにジャンプしてそこから再生
tl.play("myLabel");

TimelineMax

TimelineLiteを拡張して、repeatDelayやyoyoといったような機能を加えたものです。
これまでの機能のフル装備版となるので、他のものより少し重くなります。

//サンプル
var tl = new TimelineMax({onUpdate:updateUI, repeat:2, repeatDelay:1, yoyo:true});    
tl.from(logo, 0.5, {left:'-=60px', ease:Back.easeOut})
  .staggerFrom(txt, 0.1, {alpha:0}, 0.02, "textEffect")
  .staggerFrom(txt, 0.8, {rotationY:"-270deg", top:"100px", transformOrigin: "50% 50% -80", ease:Back.easeOut}, 0.02, "textEffect")
  .staggerTo(txt, 0.6, {rotationX:"+=360deg", transformOrigin:"50% 50% 10", color:"#90e500"}, 0.02);  

Easingについて

//サンプル
TweenLite . to ( photo ,  1 ,  { width : 100 , ease : "Elastic.easeOut" }); 

Easingについては個人的にはここが一番わかりやすかったです。
ease-visualizer

値を変えて色々プレビューできます。
ここでElasticで引数を指定するとバウンドする回数や量が変えられることをはじめて知りました…。
個人的にあまり説明書とか読むのが苦手な(というか読まない)タイプなので、こういうの直感的にわかるものがあるとすごくありがたいです。

総括

TweenMaxは、タイムライン制御ができる上に、Easing系をわざわざ別で読み込まなくても最初から入っているのが楽だなと思いました。
ただ、以前より楽に書けるようになったものの、アニメーションのセンスの方があまりないので、参考サイトのソースをみつつもう少し勉強していかないと…といったかんじです。

中の人について

matsui
大阪でwebのお仕事をしています。
ブログでは最近学んだことや、勉強会に参加したことを書いてます。