8
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【JavaScript】初めてのAnimationライブラリ導入(TweenMax)

Posted at

アニメーションってかっこいいですよね。
かっこいいサイトって大体めっちゃ動きますよね。
ということでAnimationライブラリを使う練習してみます。

##TweenMaxとは
今回はTweenMaxというライブラリを使います!
凄く高機能らしいのですが、ファイルサイズがめっちゃ重いみたいです(113KB)
こちら曰く、

TweenMaxは113KBと容量が大きいものの、モジュールを分解して読み込むことが可能。TweenMaxの兄弟であるTweenLiteだとわずか28KBです。パッケージマネージャーnpmやTypeScriptでの利用も、他のライブラリと比べて一歩進んでいます。詳しくは記事「ES Modules対応のgsapの使い方 - Qiita」を参照ください。

とのこと。
ファイルサイズを軽く扱う方法についても習得していければと思います。
(あとで参考にしそうなサイトたち)
https://blog.yuhiisk.com/archive/2016/10/05/create-tweenlite-animation1.html
https://qiita.com/manabe_66/items/42fec3e488190a0146f8

##TweenMax扱う方法
https://rfs.jp/sb/javascript/03js/greensock.html
http://un-tech.jp/tweenmax-started/
今日はこちらのサイトを参考に。

公式サイトでダウンロード可能です。
CDNを利用する場合は、

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

これをHTMLに貼り付けるだけでオッケーらしいです。
軽量化等はひとまず置いて、今回はこれでやってみます。

##TweenMax書き方

メソッドたくさんあるようですが、主要なものだけ。

メソッド 効果
set プロパティの値のみ
from 設定した値から初期値にアニメーション
fromTo 初期値を再設定・設定した値から初期値にアニメーション
to 初期値から設定したアニメーション
stagger 配列化されたセレクターを順にアニメーション
TweenMax.to('.c-kirby',2,{x: 700,repeat:-1,yoyo:true});

これはメソッドtoですね。
{}の中は順に
動かす要素の指定 プロパティ指定 アニメーションの秒数 繰り返し設定(-1は無限リピート) 繰り返し方法(yoyoは0-100%-0%の順で繰り返す)
色々な指定ができるので、詳しいのは公式を見るかhttp://reiwinn-web.net/2017/06/07/tweenmax/
このサイトが良さげです。

読み込むとちゃんと動きました!

8
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?