GreenSock簡単チュートリアル(TweenMax,TimelineMax)

9996 ワード
JavaScript tweenmax animation TimelineMax gsap JavaScript テキストリンク

GreenSockの使い方を学ぶ

概要

本エントリーではgsapの基本的な使い方をデモを交えながら説明します。

GreenSockとは

通称gsap(green sock animation platform)、内包されているライブラリからTweenMaxやTimelineMaxなど呼ばれるアニメーションライブラリです。
煩雑になりやすいアニメーションを簡素に書くことができ、なおかつ軽快な動きでモダンブラウザやie11にも対応しています。
そのほかにもアニメーションの指定をjavascriptで管理する特徴があります。
※後述しますが、Classの付け外しも可能なので、CSSのみのアニメーションと組み合わせることも可能です。

基本となるのは[TweenMax,TimelineMax]の二つのライブラリで、liteと付くのはそれぞれの軽量版になります。

gsap
┣Tweenlite
┣TweenMax
┣TimeliteMax
┣TimelineMax

環境構築

ディレクトリ構成
App/
┣index.html
┣styles.css
┣index.js
┣package.json

手軽に環境構築が出来るparcelを使用します。

parcel-bundlerのインストール

cd App
yarn add -D parcel-bundler

package.jsonにscriptsを追加します。

package.json

{
  "scripts": {
    "dev": "parcel index.html"
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.3"
  },
}

index.htmlを追加し、styles.cssとindex.jsを読み込みます。

index.html
<!DOCTYPE html>
<html lang='ja'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <link rel='stylesheet' href='./styles.css'>
    <title>Document</title>
</head>
<body>
    <h1>Hi</h1>
    <script src='./index.js'></script>
</body>
</html>

npm scriptを実行します。

yarn dev

記載されたURLにアクセスすることで、index.htmlが表示されたら成功です。

gsapのインストール

parcelではimportを解釈して不足しているモジュールをインストールしてくれます。
インストールが確認できたらgaspが正常に動作するか確認しましょう。

index.js
import { TweenMax, TimelineMax, Elastic } from 'gsap'

TweenMax.to("h1", 1, {x: 100})

いかがでしょうか。h1の"Hi"テキストがx方向に移動したら成功です。

ここまでのDemoはこちらです。

clickイベントを使って要素を動かす。

このチャプターでは上記のGIFのような、クリックした位置に要素を移動させるアニメーションを作成します。

始めにindex.htmlに#boxを追加します。

index.html
<body>
    <div id="box"></div>
    <script src="src/index.js">
    </script>
</body>

デフォルトのCSSをリセットするためbodyにmargin:0；を設定します。

styles.css
body {
  margin: 0;
}

続いてindex.jsにアニメーションを設定していきます。

index.js

import { TweenMax, TimelineMax, Elastic } from "gsap";

//TweenMax.set([obj1, obj2, obj3], {x:100, y:50, opacity:0});
TweenMax.set("#box", {
  backgroundColor: "green",
  width: "50px",
  height: "50px",
  xPercent: "-50",
  yPercent: "-50"
});

document.addEventListener("click", event => {
  //TweenMax.to([obj1, obj2, obj3], 1, {x:100});
  TweenMax.to("#box", 0.5, { x: event.x, y: event.y });
});

コードの説明です。
TweenMax.set
TweenMax.setは指定した要素の初期値を設定します。
第一引数に対象要素、第二引数にプロパティを渡すことができます。
プロパティ名にハイフンは使えないので、キャメルケースで記述します。

TweenMax.to
clickイベントを取得しTweenMax.toで指定した要素の動きを設定します。
第一引数にObject、第二引数にアニメーション完了までの時間(1/sec),第三引数にプロパティを渡すことができます。
上記の例ではクリックした位置のx,y軸の値を取得しTweenMax.toに設定することで、ポインターを追尾するような処理を実行しています。

ここまでのDemoはこちらです。

次章: GreenSock簡単チュートリアル Timelineで要素を制御する。