ハイパフォーマンスなアニメーションライブラリ TweenMax を動かしてみる。(デモありのコード多め)

TweenMax

タイトルが横文字ばかりになってしまいました。

朝からAppleが「iOS 9」でGoogleのAndroidからコピーした機能まとめを見て、「おい、Apple!!」と思わず顔をしかめてしまいました。特にMapの今更感は半端ない気がします。

書きたい内容がたくさんあるのに、なかなか書けず焦っております。そんな中、気になっていたJavaScriptアニメーションライブラリ TweenMax を使う機会があったのでご紹介。

TweenMax って

高速、高機能アニメーションを実現するjavascriptアニメーションライブラリ。スピードテストで他のライブラリと比較していますが、正直私にはよくわかりませんが、ハイパフォーマンスのようです。
個人的にはそれよりも、豊富なアニメーション機能の方が心惹かれました。

早速ダウンロード

公式サイトの greensock.com/tweenmax からダウンロードできますが、慣れるまではCDNの<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>を読み込んでおけば問題ありません。

jQueryがなくても動くライブラリですが、あらかじめjQueryを読みこんでおくとセレクタの指定が楽になります。自分は重くなるのがいやだったので、読み込まないでやりました。

TweenMax.to で要素にアニメーションを設定

まずは要素を動かすアニメーションから。これが一番簡単で挙動もわかりやすいです。
ちなみにDEMOページでそれぞれの挙動を確認できるので、合わせてご覧ください!!

TweenMaxには、アニメーションのためのメソッドがいくつか用意されています。TweenMax.to() はおそらく一番よく使うメソッドで、要素と秒数、プロバティ(挙動に関する設定も含む)の3つを引数として指定できます。例えば、1秒かけて上から下に 100px 移動させる場合は以下のように記述します。

// javascript
// TweenMax.to( '要素', 秒数, { 設定 });
TweenMax.to('#moveTop', 1, {
  y: 50,
  ease: Power2.easeInOut
});
# coffeescript
TweenMax.to '#moveTop', 1,
  y: 50,
  ease: Power2.easeInOut

えーっと、思ってたよりも簡単でしたよ。

ease を見てもらうと Power2.easeInOut とあります。TweenMax には独自のイージングがあり、種類も割と豊富。easingについては公式サイトにまとめてあるので、好きなものを探してみるもの良いかもしれません。

では、2秒かけて左から右に easingExpo.easeInOut で移動させる場合はどうかというと、以下のように書くわけですね。

// javascript
TweenMax.to('#moveLeft', 2, {
  x: 100,
  ease: Expo.easeInOut
});
# coffeescript
TweenMax.to '#moveLeft', 2,
  x: 100,
  ease: Expo.easeInOut

このアニメーションが終わった時のhtmlを見ると、

<div id="moveLeft" class="shape round green" style="transform: matrix(1, 0, 0, 1, 100, 0);"></div>

というようにtransformを使って動かしています。これを left プロパティで動かしたい場合は、x を使わず left: '100px' のように引数を変えれば思う通りに動いてくれます。

DEMOページで挙動確認できます。

アニメーションの実行を遅らせる

デフォルトではアニメーションは即時実行です。これを遅らせて実行させたい場合は delay: 秒 を追加するだけです。

// javascript
TweenMax.to('#moveLeftDelay', 2, {
  x: 100,
  delay: 0.5,
  ease: Expo.easeInOut
});
# coffeescript
TweenMax.to '#moveLeftDelay', 2,
  x: 100,
  delay: .5,
  ease: Power2.easeInOut

往復させる

右に移動して、元の場所に帰ってくるように往復させる処理はプロパティに yoyorepeat を追加することが実現できます。

// javascript
TweenMax.to('#moveYoyo', 1, {
  x: 200,
  yoyo: true,
  repeat: -1,
  ease: Expo.easeInOut
});
TweenMax.to '#moveYoyo', 1,
  x: 200,
  yoyo: true,
  repeat: -1,
  ease: Expo.easeInOut,

リピートの値を -1 にすると永遠に繰り返します。行って戻って来るだけなら、アニメーションを繰り返す回数は1回だけなので、1 としておけば大丈夫です。

複数の要素を動かす

第一引数の要素の指定を配列にすることで複数一括指定できます。

// javascript
TweenMax.to(['#moveGroup1', '#moveGroup2'], 2, {
  opacity: .54,
  rotation: 45,
  delay: 0.5,
  ease: Power2.easeInOut
});
# coffeescript
TweenMax.to ['#moveGroup1','#moveGroup2' ], 2,
  opacity: .54,
  rotation: 45,
  delay: .5,
  ease: Expo.easeInOut,

一括指定になるので、複数の要素が同時に動きます。

複数の要素を別々に動かしたい

一緒に動くなんていやだ。わかりました。そんな場合は、staggerTo を使いましょう。

// javascript
TweenMax.staggerTo(['#moveGroup3', '#moveGroup4', '#moveGroup5', '#moveGroup6'], 2, {
  opacity: .87,
  rotation: 135,
  ease: Expo.easeInOut
}, .5);
# coffeescript
TweenMax.staggerTo ['#moveGroup3','#moveGroup4','#moveGroup5','#moveGroup6'], 2,
  opacity: .87,
  rotation: 45,
  ease: Expo.easeInOut
  , .5

複数要素の指定時と同じように配列にします。引数の最後に 0.5 としているのが、アニメーションを実行する間隔となります。なので、この場合は0.5秒ごとにアニメーションが実行されています。

もっと細かく設定したい? そんな時はコールバックを検討してみます。

コールバックを追加する

TweenMax には、アニメーションを様々なタイミングで実行するためのコールバックが用意されています。

// javascript
TweenMax.to('#moveFunction1', 1, {
  x: 100,
  delay: .5,
  ease: Expo.easeInOut,
  onComplete: function() {
    console.log('Do Something');
  }
});
# coffeescript
TweenMax.to '#moveFunction1', 1,
  x: 100,
  delay: .5,
  ease: Expo.easeInOut,
  onComplete: ->
    console.log 'Do Something'
    return

onComplete を加えることで、アニメーション完了後に実行される処理を追加できます。上の場合は、アニメーション終了後にコンソールに Do Something と表示されます。他にも、以下のようなコールバックがあります。

  • onRepeat: repeat設定をしている時に実行する処理。処理完了時点で実行される。
  • onStart: アニメーションが始まる前に実行される処理
  • onUpdate: アニメーション中に実行される処理。アニメーションが終了するまで何度も行われます。コンソールで確認すると何十回と実行されていることがわかります。

また、コールバックは外部関数として記述することもできます。

// javascript
TweenMax.to('#moveFunction2', 1, {
  x: 100,
  ease: Expo.easeInOut,
  onComplete: function() {
    Reverse(this);
  }
});

Reverse = function(obj) {
  obj.reverse();
};
# coffeescript
TweenMax.to '#moveFunction2', 1,
  x: 100,
  ease: Expo.easeInOut,
  onComplete: ->
    Reverse(this)

Reverse = (obj)->
  obj.reverse()

上では reverse メソッドを使ってアニメーションを戻す処理を追加しています。これを複数回行う場合は repeat を使う方が早いですね。

TweenMax.fromto で要素に初期状態を設定する

TweenMax.fromto では、引数に初期状態の値をセットすることができます。といっても1行多くなるだけです。

// javascript
TweenMax.fromTo('#moveLeft2', 2, {
  opacity: 0,
  width: 0
}, {
  opacity: 1,
  width: '48px'
}, {
  ease: Power2.easeInOut
});
# coffeescript
TweenMax.fromTo '#moveLeft2', 2,
  { opacity: 0, width: 0 },
  { opacity: 1, width: '48px' },
  ease: Power2.easeInOut

最初の引数では初期値のスタイルをセットし、その下に処理後のスタイルを記述します。すると、いい感じでアニメーションされます。

ライセンス

Standard “No Charge” GreenSock License

基本的にはここに記載の通りです。ざっと読んで感じでは、課金の発生するコンテンツやアプリの場合は“Business Green” Club GreenSockの会員になる必要があるようです。(間違っているかもしれないので、ちゃんとライセンスを読んでください。)

本当はタイムラインなどもう少し深いところまで進もうと思ったのですが、コードを多く書いたのでやや長くなってしまいました。

ただ、かなり高機能なことは少しでも伝わったような気がします。伝わっていることを願います。ライセンスも年間150ドルと決して高くはないので、ビジネス利用の場合は検討してはいかがでしょうか。

関連記事