JavaScript
アニメーション

ライブラリの紹介

jQuery もういらない

jQueryで 一番お世話になってたのは、ブラウザ互換の吸収で最近のブラウザ対応はIE11~が主流になってるので、もはやjQueryを使う理由が無い。

アニメーションの為にjQueryを使用するのは もうやめよう

🙅🏻

脱 jQueryして

アニメーションしよう

gsap

  • TweenLite
  • TweenMax
  • TimelineLite
  • TimelineMax

gsapとは?

Green Sock社が開発してる、アニメーションライブラリ。

 

結構色んなとこで使われている。

 

ライセンスはMITではなく、独自のライセンス。

無料のwebサイトでは使用してOK。以下参照(英語)

https://greensock.com/licensing

TweenLite

基本的にはこれでやりたいアニメーションは実現できる。

足りない機能は、プラグインを追加して実現できる。

 

ドキュメントはこちら

https://greensock.com/docs/TweenLite

TweenMax

TweenLiteの強化版。

TweenLiteには無いメソッドとかある。

なので、当然TweenLiteよりファイルサイズは重い

TweenLite: 28KB | TweenMax: 115KB

(単純にダウンロードした圧縮版のファイルサイズ)

 

ドキュメントはこちら

https://greensock.com/docs/TweenMax

TimelineLite

タイムラインのアニメーションが簡単に作成できる。

これがこうなったら、次にこれがこうなるっての。

それを逆再生とかも出来る。

 

ドキュメントはこちら

https://greensock.com/docs/TimelineLite

TimelineMax

TimelineLiteの強化版。

これもTimelineLiteには無いメソッドとか色々ある

なので、当然TweenLiteよりファイルサイズは重い

TimelineLite: 13KB | TimelineMax: 21KB

(単純にダウンロードした圧縮版のファイルサイズ)

 

ドキュメントはこちら

https://greensock.com/docs/TimelineMax

Velocity.js

Velocity.jsとは?

jQueryの$.animate() と同じAPIで動作するアニメーションライブラリ。

単純に $.animate() を &.velocity() に置き換えることで動作する。

指定できる属性が$.animate() よりも豊富。

これ単体でもアニメーションさせることが出来る。

まとめ

  • jQueryが本当に必要かどうか考えてから使うようにしよう

  • アニメーションだけが目的なら、jQueryは必要なし

  • jQueryに頼り切ってると、jQuery無しじゃ生きられないカラダになっちゃうぞ

Thank You

アニメーションライブラリの紹介

By noliaki

アニメーションライブラリの紹介

  • 886