Zenn
🔰

GreenSockGSAPでかんたんアニメーション

2021/09/01に公開
JavaScript
初心者
初心者向け
greensock
tween
tech

GreenSockGSAPとは!?

GreenSockGSAPは、様々なものを簡単にアニメーションさせる事ができる、大人気ライブラリです。

GreenSockGSAP

今回は、GreenSockを紹介しながら簡単なサンプルを作ってみます。

GreenSockGSAPで出来る事

様々なアニメーションを、ShowCaseで確認する事ができます。(一目瞭然です!!)
ソースコードも同時に確認が出来るので、とても便利です。

ShowCase

GreenSockGSAPで使えるコードをまとめた"チートシート"も用意されています。(至れり尽くせり!!)
様々なコードを一覧出来るのでとても便利です。

CheatSheet

プロジェクトを作る

次の様にプロジェクトを作ります。

MyProject01/
　├ custom.css (スタイルを記述するファイルです)
　├ index.html (プログラムを起動するファイルです)
　├ main.js (メインのプログラムを記述するファイルです)

HTMLファイルを用意する

では、作っていきましょう。
HTMLファイルを用意して、下記コードを記述します。

index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="./custom.css"></link>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
	<script src="./main.js"></script>
</head>
<body>
	<div id="red">RED</div>
	<div id="green">GREEN</div>
	<div id="blue">BLUE</div>
</body>
</html>

GreenSockGSAPのライブラリのロードには、CDN(Contents Deliverly Network)を使っています。
(URLから直接ダウンロードする事で、プロジェクトがコンパクトになりますね)

そして、"div"要素を3つ用意(red, green, blue)しました。
これらをアニメーションさせます。

CSSファイルを用意する

CSSファイルでは、先ほどの3つの要素に対して、大きさと背景色を指定しておきます。

custom.css
#red{
	width: 60px; height: 60px;
	background-color: red;
}

#green{
	width: 60px; height: 60px;
	background-color: green;
}

#blue{
	width: 60px; height: 60px;
	background-color: blue;
}

JavaScriptファイルを用意する

いよいよ、メインのプログラムです。
GreenSockGSAPライブラリをロードする事で、"gsap"オブジェクトが扱える様になります。

このオブジェクトに備わっている様々な関数を利用して、アニメーションを実現します。
最も簡単な記述方法は次の様になります。

main.js
gsap.to("セレクタ", {様々なパラメータ: 値, duration: 秒数});

実際に記述してみましょう。
次のコードは、"red"を、1秒間かけてx座標100に、
"green"を、2秒間かけてx座標30、y座標30に、
"blue"を、3秒間かけてx座標100、90度回転させるサンプルです。

main.js
window.onload = ()=>{
	console.log("onload!!");
	gsap.to("#red", {x: 100, duration: 1});
	gsap.to("#green", {x: 100, y: 30, duration: 2});
	gsap.to("#blue", {x: 100, rotationZ: 90, duration: 3});
}

3つの"div"要素を操作する事ができました。(やりました!!)

アニメーションの設定

"gsap.to関数"の第二引数には、アニメーションの挙動に対して様々な設定をする事が出来ます。
簡単にまとめると次の様になります。

設定 意味
duration アニメーション実行時間(秒数)
delay アニメーション開始までの待機時間(秒数)
ease アニメーションのイージング(ex:"power2.inOut")
stagger アニメーション時間をずらす(秒数)
paused アニメーションを停止状態にする(true/false)
repeat アニメーションの繰り返し回数(整数)
repeatDelay アニメーションの繰り返し間隔時間(秒数)

"ease"には様々なイージングを指定する事が出来ます。
こちらに関しては、Easesを参照ください。

アニメーションのイベント

アニメーション実行に関して、様々なイベントを取得する事が出来ます。

アニメーション実行時や終了時等、何かしらの処理をしたい場合に利用すると良いでしょう。
これらは、コールバック関数として実行されます。

主なコールバックは次の通りです。

設定 意味
onStart アニメーション開始時に実行されます
onUpdate アニメーション更新時に実行されます
onRepeat アニメーションが繰り返される時に実行されます
onComplete アニメーション終了時に実行されます

最後に、全体のコードを載せておきますね。

main.js
window.onload = ()=>{
	console.log("onload!!");

	gsap.to("#red", {
		x: 100,// x座標を100に
		duration: 1,// アニメーション実行時間
		delay: 1,// 待機時間
		ease: "power2.inOut",// イージング
		repeat: 2,// 繰り返し回数
		onStart: ()=>{// アニメーション開始時
			console.log("onStart!!");
		},
		onComplete: ()=>{// アニメーション終了時
			console.log("onComplete!!");
		}
	});
	gsap.to("#green", {x: 30, y: 30, duration: 2});
	gsap.to("#blue", {x: 100, rotationZ: 90, duration: 3});
}

見事にアニメーションを制御する事ができました。(やりました!!)

最後に

GreenSockGSAPの使い方を簡単に説明させていただきました。
使い方も簡単なので、きっと病みつきになると思います。
最後まで読んでいただき有難うございました。

Discussion