【メモ】jQueryのアニメーションのときに使うプラグイン

数年前に作ったWEBサイトを拡充するとき、
古いブラウザも考慮しつつjQueryでアニメーションを作ることがまだまだある。

jQueryで「animate」メソッドを使うと重くなるのは
既知の事実であるので、今更ながら備忘録的な意味でメモ。

jQueryでアニメーションを組む時に使うプラグイン

TweenMax.js

• 対応ブラウザ：IE8～（CSSプロパティ対応状況に準ずる）
• メリット：コードが短い
  
  TweenMax.to('ID名', 秒数, { プロパティ });
  
  
• デメリット：課金コンテンツなどで使用する場合、ライセンス料が発生する。

Velocity.js

• 対応ブラウザ：jQueryありだとIE8～（CSSプロパティ対応状況に準ずる）
• メリット：jQuery animateライクに書ける
  
  $("ID名").velocity({ プロパティ }, 秒数など);
  
  
• デメリット：javascript版だとIE8対応できない（デメリットっていうほどのデメリットではない）

anime.js

• 対応ブラウザ：IE10～（CSSプロパティ対応状況に準ずる）
• メリット：CSSライクに書ける。かつVelocity.jsより軽量。
  
  anime({targets: 'ID名', プロパティ});
  
  
• デメリット：古いブラウザに対応できない

CSS3アニメーションは？

CSS3アニメーションでいいのでは？
と思われるが、CSS3アニメーションは

• delayプロパティの管理が煩雑
• SVGアニメーションがブラウザ間で統一されない
• DOMの操作ができない

という問題点がある。また、スピードもVelocity.jsのほうが早いようだ。

参考：http://beijaflor.hatenablog.jp/entry/2014/06/18/090706

ただし、jQueryを使用するまでもない簡単なアニメーションを実装する場合は
CSS3アニメーションを使用するといいと思う。

まとめ

TweenMax.jsはクセになると課金コンテンツ作る際困ってしまうので、

• 単純なアニメーションを動かす場合はCSS3アニメーション
• 古いブラウザまで対応したいのならVelocity.js
• 古いブラウザ捨ててもいいならanime.js

この３つがいいなと個人的に思った。