jQueryよりスムーズ。アニメーションライブラリTweenMaxの基礎とデモ

2016.9.21 jQuery

jQuery無しでアニメーション。TweenMaxを使ってサイトをコーディング

今更ですが、アニメーションライブラリ「TweenMax」を触ってみました。
かなり高度でスムーズなアニメーションが実装できますが、理屈はかんたんで、
少し理解するだけで、Webサイトで使われるような効果は実装できます。

TweenMaxを使ったアニメーションのデモ

TweenMaxを使うメリット

jQuery には豊富な機能が揃っているぶん、無駄なコードが多かったり、処理に時間がかかるなど昨今では気にかけるクリエイターが多いようです。

かんたんにアコーディオンを実装できるslideToggle();ですが、実際、スマートフォンで見たときにアニメーションがもたついたりする場合があります。

TweenMaxを開発?しているGSAPのサイトにアニメーションの比較があるのでよければ参考にしてみてください。なんとなーくjQueryよりもTweenMaxやほかのライブラリがスムーズに動いているような気がします。

スピードテスト

TweenMax(TimelineMax)とは

TweenLite」というアニメーションライブラリの拡張版です。
アニメーションのリピートや反復ができるのが「TweenMax」で、よほど問題がなければ拡張版であるTweenMaxを選んでいいと思います。

また、アニメーションを連結して複数の動作を続けるときは「TimelineMax」を使います。こちらにも「TimelineLite」というものの拡張版です。

jQueryセレクタを使えたりと、アニメーションの要素を選択するのもかんたんで、かつ、アニメーションの指示をドットで順につなげて書く(TimelimeMax / Lite)ので、あとで見たときに解りやすく、非常に導入しやすいのです。

ライセンス

商用・非商用問わず無料です。が、splitTextやその他一部の機能は課金ユーザーのみしか使用することができるものがあります。

TweenMaxの使い方、基礎

まずはプラグインをTweenMaxを読み込みます。開発元であるGSAPのサイトからダウンロードするか、CDN.jsから読み込みます。

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

読み込んだ上で、TweenMaxオブジェクトに対して記述していきます。

TweenMax.【操作方法】(【エレメント】, 【アニメーション秒数】, {
  【CSSプロパティ: 値】,
  【CSSプロパティ: 値】,
  【CSSプロパティ: 値】,
    ... ,
  【ほか、オプション・イージングの設定】
} );

このような順で記載します。

操作方法

アニメーションの操作方法です。初期値の設定、アニメーションの目標値などをここで宣言します。

目的メソッド
CSSをセットするだけTweenMax.set.(~)
CSSなどの初期値から、
to設定値までのアニメーションをセット
TweenMax.to(~)
fromTo初期値から
fromTo設定値のアニメを両方セット
TweenMax.fromTo(~)
from設定値から、
初期値までのアニメをセット
TweenMax.from(~)
配列で指定された要素を順番に、
初期値からstaggerTo設定値にアニメさせる
TweenMax.staggetTo(~)

ほかにも一時停止や指定の秒数からアニメーションを始めるメソッドなどありますが、ここでは割愛します。

エレメントを指定する

エレメント指定方法
idTweenMax.to.('#element', 1,{ ~ });
クラスTweenMax.to.('.element', 1,{ ~ });
配列TweenMax.to.(['#element1', '#element2'], 1,{ ~ });
Elementvar element = document.getElementById( '#element' );
TweenMax.to.( element , 1,{ ~ });
jQueryオブジェクトTweenMax.to.($('.element'), 1,{ ~ });

これは上でも書いたように、jQueryセレクタのように、htmlタグの名前でも、class=””の値でも、idでも指定できます。[‘.A’,’.B’]のように配列もOKです。もちろん、getElementByIdで取得したHTML ElementでもOKです!

アニメーション秒数

ミリ秒でなく、秒数で書きます。1000ms = 1です。500ms = 0.5と書きます。ここで書いた時間だけ、アニメーションします。

CSSプロパティ・値

数値で指定できるCSSプロパティはアニメーションさせることができます。
また、leftやtopの指定もできますがX軸Y軸に対しての指定、演算、関数を発火させることもできます。

書き方CSS備考
marginTop: '10px'margin-top: 10pxハイフンは書かず大文字にする
rotation: '5deg'transform: rotateX( 5deg )rotateは「rotation」と書く.
degではなく cw(時計回り)ccw(反時計回り)の指定もできる
left: "+=100"
x: "+=100"
left: ~
transoform: translate3d( ~ )
現在の値に加算する書き方。
+ や - など演算が可能。
leftなどではなくX軸Y軸に対しての指定もできる
x: function() {
return Math.random() * 300;
}
デモ関数も指定できる

ほか、オプション

アニメーションのディレイや反復、アニメーション終了時、アニメーション開始時、アニメーションのリピートのたびに、コールバック関数を渡せます。

コールバック系

実行タイミングメソッド
アニメーション開始時TweenMax.to.(element, 1,{
~,
onStart function(){~}
});
実行中随時TweenMax.to.(element, 1,{
~,
onUpdate: function(){~}
});
終了時TweenMax.to.(element, 1,{
~,
onComplete: function(){~}
});
リピート時TweenMax.to.(element, 1,{
~,
onRepeat: function(){~}
});
反復時TweenMax.to.(element, 1,{
~,
onReverse: function(){~}
});
反復終了時TweenMax.to.(element, 1,{
~,
onReverseComplete: function(){~}
});

ちなみに、「this.target」でアニメーション中の要素が取得できます。

リピート・反復・遅延系

目的メソッド
回数分のリピートTweenMax.to.(element, 1,{ ~, repeat: 2, ~ });
反復TweenMax.to.(element, 1,{ ~, yoyo: true, ~ });
リピートの遅延TweenMax.to.(element, 1,{ ~, repeat: 5, repeatDelay: 0.5, ~ });
アニメ開始の遅延TweenMax.to.(element,1,{ ~, delay: 0.5, ~ });
アニメ停止状態にするpaused: true

イージングの設定

「ease」メソッドで、アニメーションの動き方を設定します。

実際の動き方と書き方は、下のボタンからGSAPオフィシャルサイトでご確認ください。

目的指定方法
アニメーションのイージングTweenMax.to.('#element', 1,{ ~, ease:【イージング指定】 });

イージングのデモ1 イージングのデモ2

アニメーションを止める、始める

「操作方法」で少し書きましたが、

TweenMaxのオブジェクトを作ることで、アニメーションを一時停止、リセット、反転などすることができます。

button.addEventListener( 'click',function(){	
	if( anim ){
		anim.restart();
	} else {
		anim = TweenMax.to( element, 1, { ~ });		
	}
});
目的メソッド
再生anim.play();
指定した秒数からスタートanim.play( 1 );
再スタートanim.restart();
反復anim.reverse();
スピードを調節anim.timeScale( 0.3 );
一時停止anim.pause();

TweenMaxのかんたんなデモ

ここまで説明したことから、最も基礎的なデモを作ってみます。

TweenMaxの使い方、基礎2

時間差でアニメーションさせる

先述の、「staggerTo」メソッドを使います。

単調なアニメーションを時間差で行うにはこれを用います。

TweenMax.staggerTo(【複数のエレメント】, 【アニメーション秒数】, {
  【CSSプロパティ: 値】,
    ... ,
  【ほか、オプション・イージングの設定】
}, 【アニメーションの間隔】 );

複数のエレメント

ここには、getElementsByClassNameや、$(‘.elements’)など、複数の要素を指定します。

アニメーションの間隔

staggerToを使う場合は、連続して処理される要素ごとの、アニメーションの間隔を指定する必要があります。これがないと一気に処理されてしまうので、時間差が生まれません。

staggerToのデモ


ローディングアニメーション等に使いやすそうですね!

TimelineMaxの使い方、基礎

TweenMaxとは別に、アニメーションを連結していろいろなパターンを設定できる「TimelineMax」というものがあります。これはTweenMaxと同じ考え方で、もちろん単一のアニメーションの実装にも使えるので、TweenMaxの更に拡張版と考えても良いと思います。

同じように、ダウンロードもしくはcdn.jsから読み込みます

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TimelineMax.min.js"></script>

ドットで連結して指示をしていきます。その順でアニメーションが実行されますが、先程も書いたように基本的にはTweenMaxと同じ考え方で、ただ連結した順に動くだけの話です。

var tl = new TimelimeMax();
tl.【操作方法】(【エレメント】, 【アニメーション秒数】, {
  【CSSプロパティ: 値】,
    ... ,
  【ほか、オプション・イージングの設定】
} ).【操作方法】(【エレメント】, 【アニメーション秒数】, {
  ~
},【前のアニメーションとの間隔】, 【ラベル】 ).【操作方法】(【エレメント】, 【アニメーション秒数】, {
  ~
},【前のアニメーションとの間隔】,【ラベル】);

【前のアニメーションとの間隔】と【ラベル】はオプションで、指定しなくてもOKです。

前のアニメーションとの間隔

小ネタですが、ここを「‘-=0.8’」などと書くことで、アニメーションの実行を早めることができます。

通常は連結した順に、前の処理がピッタリ終わってから次の処理に移りますが、この値を指定することで、その秒数分フライングしてアニメーションを開始します。

TimelineMaxのラベル

ラベルを書いておくと、アニメーションの開始をラベルの位置からにすることができます。

tl.seek( '【ラベル名】' )

アニメーションの時間や進捗を取得する

TimelineMaxオブジェクトから、アニメーションに関する情報を取得することができます。

var tl = new TimelimeMax();
tl.【操作方法】(【エレメント】, 【アニメーション秒数】, {
  【CSSプロパティ: 値】
  【ほか、オプション・イージングの設定】
} ).【操作方法】(【エレメント】, 【アニメーション秒数】, {
  ~
},【前のアニメーションとの間隔】, 【ラベル】 ).【操作方法】(【エレメント】, 【アニメーション秒数】, {
  ~
},【前のアニメーションとの間隔】,【ラベル】);

progress = tl.progress(); //進捗
totalProgress = tl.totalProgress();//リピートなど含む進捗
time = tl.time(); //秒数

 

TweenMaxとTimelineMaxを使ったデモ

だいたいここまでの考え方と書き方が理解できれば、TweenMaxを使うことはできるでしょう。staggerToなんて、書くだけでオリジナルのローディングアニメーションが作れますから。

ここで、デモ集を作ってみました。
コードも書いてあるので、参考にしてみてくださいー!

TweenMax, TimelineMaxのデモ集

ちなみに、GSAPのサイトの下層ページにあるメインヴィジュアルのアニメーションも、TimelineMaxを使って実装されていますよ!スムーズですね。こちらも参考程度に、気に留めてみてください。

 

でわ!

プロフィール

東京でWebデザイナー・コーダーとして、フロントエンド的なことからデザイン思考的なことを考えたりして、ごにょごにょと活動中。(ポートフォリオ)Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったりコーヒ豆買いに行ったり、主に散歩しています。。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。コーヒー友達募集中。