第3章 応用・JavaScript関連技術

GreenSock -アニメーションライブラリのデファクトスタンダード

2018年11月27日

GSAP(GreenSock Animation Platform)の概要

GSAP(GreenSock Animation Platform)は、高速・軽量のHTML5アニメーションライブラリで、アニメーションライブラリのデファクトスタンダードといえる程多くのサイトで利用されています。近年、アニメーションはますます重要度を増しています。Webサイトのギャラリーサイトとして有名なAwwwardsでは、日毎、月ごと、年ごとに優れたサイトを表彰していますが、その入賞経験のあるサイトのトレンドを分析すると、90パーセント以上のサイトがアニメーションを使っていて、65パーセントサイトがGSAPを使っているという結果がでました。
GreenSockの主なモジュールとして、トゥイーンを実現するTweenMaxと、タイムラインを制御するTimelineMaxの2種と、それぞれの簡易版の2種があります。

ライブラリ 説明
TweenMax HTML5アニメーションライブラリです。
TweenLite TweenMaxの簡易版です。
TimelineMax 複数のトゥイーンやタイムラインを制御します。
TimelineLite TimelineMaxの簡易版です。

以降の説明はすべてすべての機能が揃っているTweenMax、TimelineMaxが対象です。ただし、使い方は同じなので、簡易版にも同じ機能が用意されていれば名前を変えるだけでそのまま使えます。
GreenSockはMITやGPLのライセンスではなく、独自のライセンスを採用しています。GreenSockのライセンスを要約すると、無料で公開されているサイトであれば無料ですが、有料なコンテンツがある場合は有料のライセンス登録が必要です。

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

TweenMaxはトゥイーン・アニメーションを実現するためのライブラリです。利用するには、オフィシャルサイトからダウンロードするか、CDNサイトでも提供されているので、そのURLを読み込みます。

CDNを利用する場合は、下記のようなSCRIPTタグになります。

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

ダウンロードはGSAPのオフィシャルサイトか、Githubからになります。

GSAPのダウンロードファイルには、srcフォルダがあり、その中にminifiedとuncompressedフォルダがあります。minifiedにはコンパクト化されたTweenMax、TimelineMaxなどが含まれ、uncompressedにはコンパクト化されてないファイルが含まれます。利用する際はminifiedにあるファイルを読み込んでください。
TweenMaxには様々なメソッドが用意されていますが、その中でも代表的なメソッドはfrom()とto()です。ここではfrom()メソッドを使って説明します。from()メソッドはアニメーション開始時の状態をセットし、現在の値までアニメーションさせます。引数はターゲット(セレクタかオブジェクト)、アニメーションの実行速度、CSSプロパティやオプションのオブジェクトです。TweenMaxの構文は下記のとおりです。

構文:
TweenMax.from( ターゲット, アニメーション秒数, { 
	CSSプロパティ: 値,
	CSSプロパティ: 値,
} );
引数 説明
ターゲット アニメーションのターゲットを指定します。idやclass、jQueryオブジェクトなどで指定できます。また、配列にして複数のオブジェクトを指定することもできます。
秒数 アニメーションの秒数を指定します。
CSSプロパティ アニメーションさせるCSSプロパティと、オプションをオブジェクト形式で指定します。

第3引数はCSSのプロパティ以外にもTweenMaxが用意しているオプションを指定できます。中でも実行までの待ち時間を指定できるdelay、イージングを指定できるease、コールバック関数を指定できるonCompleteなどが便利です。

実例
TweenMax.from( ".btn" , 1 , {
	left : "100px", // CSSプロパティ
	delay : 1, // 実行までの待ち時間
	ease : Power1.easeOut, // イージング
	onComplete : function(){}, // 処理後じ実行する関数を指定
} );

実習|TweenMaxを使う

TweenMaxを使って、ボタンを1秒かけて透明にします。TweenMax.from()はCSSで設定した値から、from()メソッドで指定したCSSの値までアニメーションさせます。HTML、CSS、JavaScriptのコードは下記の通りです。

CodePen: https://codepen.io/zionboogie/pen/OvyxyR

See the Pen 【07-01-01】GSAP:from()メソッドを使ったアニメーション by jun (@zionboogie) on CodePen.

HTML
<button id="btn">click</button>
CSS
#btn{
	position: absolute;
}
JavaScript
// クリックのイベントリスナーを登録
document.getElementById( "btn" ).addEventListener( "click", function(){
	// 下に40px移動
	TweenMax.from( '#btn', 1, { top: "40px" } );	
} );

ターゲット

ターゲットにはidやclass名以外に、getElementById()やjQueryなどを使って取得したオブジェクトを指定できます。

// jQueryを使ってオブジェクトを取得
TweenMax.from( $("#btn"), 2, { opacity: 0} );

// getElementById()を使ってオブジェクトを取得
TweenMax.from( document.getElementById( "btn" ), 2, { opacity: 0 } );

複数のターゲットを指定したい場合、リストを使います。次の例ではbtn1IDとbtn2IDの要素をターゲットにしています。

TweenMax.from( ["#btn1","#btn2"], 2, { opacity: 0 } );

CSSプロパティ

GSAPに指定できるCSSプロパティには、アニメーションでよく使うCSSとして横幅(width)、高さ(height)、上配置(top)、左配置(left)、背景色(background-color)、外余白(margin)、内余白(padding)などや、回転(rotation)、拡大・縮小(scale)、傾斜変形(skew)、透過(opacity)などがあります。指定方法はオブジェクト形式です。

{
	opacity: 0,
	"background-color" : "#fff"
}

CSSプロパティに数値を指定する場合、加算・減算などの四則演算子も使えます。下記は変数xに100を足して、ピクセル指定しています。

{ left : x + 100 + "px" }

CSSプロパティにハイフンが含まれる場合は、ダブルクォーテーションで囲うか、ハイフンを削除して次の単語の頭文字を大文字にします。

// エラーになります
{ background-color : "#fff" }

// 正常に動作します
{ "background-color" : "#fff" }
{ backgroundColor : "#fff" }

ほとんどのCSSプロパティが提供されていますが、GSAPでは、transform : translateX、transform : translateYの代わりに、X座標(x)、Y座標(y)、Xパーセント(xPercent)、Yパーセント(yPercent)を提供しています。

// ターゲットの位置を40ピクセル右に移動
TweenMax.from( "#btn", 2, { x : 40 } );

// ターゲットの位置を自分の横幅の4倍分の距離に移動
TweenMax.from( "#btn", 2, { xPercent : 400 } );

オプション

CSSプロパティを設定する第3引数には、GSAPが提供する下記のようなオプションも設定可能です。

オプション
プロパティ 説明
repeat : 秒数 回数分のリピート
yoyo : true/false 反復リピート
repeatDelay : 秒数 リピートを開始させるまでの待ち時間を設定
delay : 秒数 アニメーションを開始させるまでの待ち時間を設定
ease : イージング イージングを設定
paused : 真偽値 アニメーションを停止する

TweenMaxには種類豊富なイージングが用意されています。公式サイトで様々なイージングが試せます。

自然なアニメーションに仕上げやすいのがPower1.easeOutからPower4.easeOutあたりで、その他使えるイージングとしてはバネのような効果がだせるElastic、ボールが跳ねたような効果をだせるBounceなどがあります。

// 移動などのアニメーションに使い勝手が良い
TweenMax.from( '#btn', 1, { left: "200px", ease:Power1.easeOut } );

// バネを伸ばして離したような効果が得られる
TweenMax.from( '#btn', 1, { left: "200px", ease:Elastic.easeOut } );

先程のサンプルを少し変更してイージング処理を試してみましょう。次のコードはボタンをクリックするとバネのようなイージングで右に移動して戻ります。

CodePen: https://codepen.io/zionboogie/pen/qoOPwO

See the Pen 【07-01-02】GSAP:イージング by jun (@zionboogie) on CodePen.

JavaScript
document.getElementById( "btn" ).addEventListener( "click", function(){
	// バネを伸ばして離したような効果が得られる
	TweenMax.from( '#btn', 5, { x: 100, ease:Elastic.easeOut } );
} );

コールバック

GSAPの第3引数には、コールバック関数を指定できるオプションが幾つかあります。アニメーション開始時にコールバックするonStart、アニメーション中何度もコールバックするonUpdate、アニメーション終了時にコールバックするonCompleteなどのオプションで、オプション名の後にコロン(:)で区切り、関数名を指定します。

TweenMax.from( "#btn", 2, { left: "200px", onComplete:myFunc } );

// from()終了後に呼び出される
function myFunc(){
	console.log( "finished" );
}
コールバック系メソッド
メソッド名 実行されるタイミング
onStart アニメーション開始時
onUpdate アニメーション中何度も
onComplete アニメーション終了時
onRepeat リピート時
onReverse 反復時
onReverseComplete 反復終了時

トゥイーンの参照

TweenMaxのメソッドはトゥイーンの参照を返します。利用法としては、たとえば、pausedオプションを使ってトゥイーンをストップさせた状態にし、そのトゥイーンの参照を変数に代入すると、それ以降はその変数を使ってトゥイーンを操作できます。

// トゥイーンをストップさせた状態にする
var tm = TweenMax.from( '#btn', 1, { left: "200px", paused:true } );

// トゥイーンを再開
tm.resume();

トゥイーンの参照を操作できるメソッドとしては、pause()、resume()、reverse()、restart()などがあります。

トゥイーン操作系メソッド
メソッド名 説明
play( 秒数 ) アニメーションを再生。開始時間を秒数指定できる。
restart() リスタート
reverse() 反復
pause() 一時停止
timeScale( 5 ) スピードを調節

pause()引数に秒を指定することで、任意の秒数の状態でストップさせることができます。

// 3秒たったアニメーションの状態で一時停止
tm.pause( 3 );

timeScale()はアニメーション速度を指定の倍速に変更することができます。

// 5倍の速さで再生
tm = TweenMax.from( "#btn", 2, { skewX:"360deg" } );
tm.timeScale( 5 );

次のコードは左のボタンを押した場合は下に200ピクセル移動して元の位置に戻ります。右のボタンは同じアニメーション処理の後、1秒後にそのアニメーションを停止させます。

CodePen: https://codepen.io/zionboogie/pen/mxeqeB

See the Pen 【07-01-03】GSAP:トゥイーン操作系メソッド by jun (@zionboogie) on CodePen.

HTML
<button id="btn1">click</button>
<button id="btn2">click</button>
JavaScript
// 左ボタンのクリックをイベントリスナーに登録
document.getElementById( "btn1" ).addEventListener( "click", function(){
	// 下に200ピクセル移動
	TweenMax.from( "#btn1", 2, { y:"200px" } );
} );

// 右ボタンのクリックをイベントリスナーに登録
document.getElementById( "btn2" ).addEventListener( "click", function(){
	// 下に200ピクセル移動
	var tm = TweenMax.from( "#btn2", 2, { y:"200px" } );
	// 1秒後にストップ
	tm.pause( 1 );
} );

よく使うメソッド

GSAPが用意しているメソッドには、from()やto()の他に、アニメーションの初期設定をするset()や、複数のターゲットを順番にアニメーションさせるstaggerTo()、staggerFrom()、staggerFromTo()などがあります。

メソッド名 説明
set() アニメーションなしで、CSSプロパティ、オプションのみ設定
to() CSSの初期値から設定した値にアニメーションさせる
from() toとは逆に、設定した値から初期値にアニメーションさせる
fromTo() CSSの初期値を設定し、設定した値からアニメーションさせる
staggerTo()/staggerFrom()/staggerFromTo() 複数のターゲットを順番にアニメーションさせる

TimelineMaxを使ったトゥイーンの管理

TweenMaxで定義したトゥイーンは全て同時に開始されるため、連続してトゥイーンを続けたい場合、delayオプションを使って前のトゥイーンが終わる時間を指定する必要があります。このような複数のトゥイーンを組み合わせたいような場合は、TimeLineMax使ったほうが簡単に実装できるます。TimeLineMaxはTweenMaxの拡張版のようなもので、TweenMaxのようにトゥイーンを制御し、さらにそれぞれのトゥイーンを連結することができます。連結されたトゥイーンは、最初のトゥイーンが終了するタイミングを待って、次のトゥイーンが自動的に開始されます。
TimeLineMaxもTweenMax.jsに含まれます。CDNであれば次のように読み込んでください。

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

TimelineMaxは最初にインスタンスを生成します。そのあとに、to()、from()などのメソッドを使います。メソッドの定義の仕方はTweenMaxと共通ですが、TimeLineMaxはメソッドチェーンが使えるので、トゥイーンを定義したあと、ドット( . )でメソッドを連結することができます。

CodePen: https://codepen.io/zionboogie/pen/vRNWpp
JavaScript
var tm = new TimelineMax();
// 右に移動
tm.from( "#btn", 3, {
	"x" : 300,
	ease : Power4.easeOut
} )
	// 大きくする
	.from( "#btn", 0.5, {
		scale : 1.5
	});

メソッドチェーンでつなげた場合、前のトゥイーンが終わったタイミングで次のトゥイーンが自動的に開始されます。delayを使ってさらにタイミングを遅らせることもできますが、「-=2」のようにマイナスの値を指定することで前のトゥイーンの途中から次のトゥイーンを開始することができます。 TimelineMaxのインスタンス生成時に指定可能な主なオプションは以下のとおりです。

オプション 説明
delay:秒数 アニメーションを開始させるまでの待ち時間(またはフレーム数)
paused:真偽値 アニメーションを停止する
repeat:回数 回数分のリピート
yoyo:真偽値 反復リピート
onComplete:Function アニメーション終了時に関数を実行
useFrames:真偽値 アニメーションのタイミングを秒ではなくフレームにする
onStart:Function アニメーション開始時に実行
onUpdate:Function アニメーション中随時実行
onRepeat:Function リピート時に実行
onReverseComplete:Function 反復終了時に実行
autoRemoveChildren:Boolean 終了時に子トゥイーン、タイムラインを削除
repeatDelay:秒数 リピートを開始させるまでの待ち時間(またはフレーム数)
// repeatオプションを使って5回繰り返します。
var tm = new TimelineMax( { repeat : 5 } );

ラベル

TweenMaxが提供するラベル機能を使うと、アニメーションを開始させるタイミングを簡単に操作することができます。ラベルをタイムラインに追加しておくと、あとでそのラベルを指定することで、アニメーションの開始をラベルの位置にすることができます。
次のスクリプトはまずx座標を150ピクセル移動し、ラベル名scene1を登録します。次にy座標を150ピクセル、透過を0に指定し、scene1のラベルを指定しています。そのため、この2つのトゥイーンはx座標のトゥイーンが終わると同時に2つのトゥイーンが開始されます。

CodePen: https://codepen.io/zionboogie/pen/EEVoxX

See the Pen 【07-01-05】GSAP:アニメーションの開始位置をラベルで設定 by jun (@zionboogie) on CodePen.

JavaScript
var tm = new TimelineMax();

// 右に移動
tm.to( "#btn", 1, {
	x : 150
})
	// ラベルを追加
	.add( "scene1" )
	// 縦に移動
	.to( "#btn", 1, {
		y : 150
	}, "scene1" )
	// 透過
	.to( "#btn", 1, {
		opacity : 0
	}, "scene1" );

ラベルは追加時にディレイを指定することができます。秒数を指定すると、そのラベルを指定したアニメーション全てにディレイが適用されます。

// scene1ラベルは3秒後に開始
.add( "scene1", 3 )

ターゲットのラベルを指定する際、演算子を使ってディレイを指定することができます。たとえばscene1の1秒後にアニメーションを開始したい場合は、"scene1 += 1" と記述できます。

// scene1ラベルの1秒後に開始
.to( "#btn", 1, {
		opacity : 0
}, "scene1 += 1" );

play()を使って任意のラベルに飛ばすこともできます。

tl.play( "scene1" );

タイムラインのネスト

タイムラインは他のタイムラインに追加することができます。まずメインのタイムラインを用意し、そのインスタンスに追加したいタイムラインをadd()メソッドで追加します。

var tm = new TimelineMax();
tm.to( "#btn", 1, {
	x : 150
});

var tm2 = new TimelineMax();
tm2.to( "#btn", 1, { opacity : 0 } );
tm.add( tm2 );

上記のコードでは、メインのタイムラインtmがx座標に150ピクセル移動します。追加したいタイムラインtm2は透過します。透過するタイムラインtm2をメインのタイムラインtmに追加すると、移動が終わったタイミングで透過処理が始まります。

任意のラベルから再生する

seek()メソッドは、引数で指定したラベルの位置からアニメーションを開始させることができます。ラベル以前のアニメーションは飛ばされるので、開発時やデバッグ時に便利です。

var tm = new TimelineMax();

tm.to( "#btn", 1, {
	x : 150
})
	.add( "scene1" )
	.to( "#btn", 1, {
		y : 150
	}, "scene1" )
	.add( "scene2" )
	.to( "#btn", 1, {
			x : -150
	}, "scene2" );

"scene2"からアニメーションを開始したい場合は、seek()メソッドに"scene2"を指定します。

tm.seek( "scene2" );

長いアニメーションの場合、途中のトゥイーンを調整するには何度も最初からアニメーションを繰り返すことになり、アニメーションの再生に多くの時間が費やされます。seek()メソッドを使えば、好きなラベルからスタートできるので、確認したいアニメーション部分から開始させることができて非常に便利です。

複数の要素を時間をずらして実行

複数の要素をCSSのクラスなどを使ってグループにして、それらをタイミングを少しずつずらしてアニメーションを実行させたい場合、staggerTo()、staggerFrom()、staggerFromTo()が便利です。
これまでに紹介したto()、from()、fromTo()メソッドとほぼ同じですが、、staggerTo()、staggerFrom()、staggerFromTo()には第4引数があり、アニメーション開始までの時間間隔を指定します。同じクラス名を持った複数の要素を用意しておき、次のようにstaggerTo()を使って時間間隔を指定すると、最初の要素が動き始めてから0.5秒たって、次の要素が動き始めます。

tm.staggerTo( ".btn", 1, {
	x : 150
}, 0.5)

staggerTo()メソッドを使ったアニメーションを作成してみましょう。次のコードは4つのボタンが左、下、右の順番に移動します。

CodePen: https://codepen.io/zionboogie/pen/qoOMdp

See the Pen 【07-01-06】GSAP:staggerTo()メソッドを使ったアニメーション by jun (@zionboogie) on CodePen.

HTML
<button class="btn">click</button>
<button class="btn">click</button>
<button class="btn">click</button>
<button class="btn">click</button>
JavaScript
var tm = new TimelineMax();

tm.staggerTo( ".btn", 1, {
	x : 150
}, 0.5 )
	.staggerTo( ".btn", 1, {
		y : 150
	}, 0.5 )
	.staggerTo( ".btn", 1, {
		x : -150
	}, 0.5 );

Comment

コメントを残す

メールアドレスが公開されることはありません。

関連記事

CONTACT US

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。