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

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

Kazuya Takato

Kazuya Takato

こんにちは、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社長、岩上貴洋が結婚しました。

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

Webサイト制作の実績・料金を見る

この記事のシェア数

1983年生まれ。SIerとしてのキャリアをスタートし、JavaやC#を中心に多岐にわたる開発プロジェクトにエンジニアとして参加。その経験を活かし、LIGを創業。バックエンドおよびフロントエンドエンジニアとしての深い知識と経験をもとに、多様なプロジェクトに従事。2023年7月には社長室室長に就任にし、社内の体制やルールの最適化、AI技術の推進など、経営戦略の一翼を担っています。

このメンバーの記事をもっと読む