JavaScript
アニメーション
ライブラリの紹介
jQuery もういらない
jQueryで 一番お世話になってたのは、ブラウザ互換の吸収で最近のブラウザ対応はIE11~が主流になってるので、もはやjQueryを使う理由が無い。
アニメーションの為にjQueryを使用するのは もうやめよう
🙅🏻
脱 jQueryして
アニメーションしよう
gsap
- TweenLite
- TweenMax
- TimelineLite
- TimelineMax
gsapとは?
Green Sock社が開発してる、アニメーションライブラリ。
結構色んなとこで使われている。
ライセンスはMITではなく、独自のライセンス。
無料のwebサイトでは使用してOK。以下参照(英語)
TweenLite
TweenMax
TweenLiteの強化版。
TweenLiteには無いメソッドとかある。
なので、当然TweenLiteよりファイルサイズは重い
TweenLite: 28KB | TweenMax: 115KB
(単純にダウンロードした圧縮版のファイルサイズ)
ドキュメントはこちら
TimelineLite
タイムラインのアニメーションが簡単に作成できる。
これがこうなったら、次にこれがこうなるっての。
それを逆再生とかも出来る。
ドキュメントはこちら
TimelineMax
TimelineLiteの強化版。
これもTimelineLiteには無いメソッドとか色々ある
なので、当然TweenLiteよりファイルサイズは重い
TimelineLite: 13KB | TimelineMax: 21KB
(単純にダウンロードした圧縮版のファイルサイズ)
ドキュメントはこちら
Velocity.js
Velocity.jsとは?
jQueryの$.animate() と同じAPIで動作するアニメーションライブラリ。
単純に $.animate() を &.velocity() に置き換えることで動作する。
指定できる属性が$.animate() よりも豊富。
これ単体でもアニメーションさせることが出来る。
まとめ
-
jQueryが本当に必要かどうか考えてから使うようにしよう
-
アニメーションだけが目的なら、jQueryは必要なし
-
jQueryに頼り切ってると、jQuery無しじゃ生きられないカラダになっちゃうぞ
Thank You
アニメーションライブラリの紹介
By noliaki
アニメーションライブラリの紹介
- 961