jQueryを使った複雑なアニメーションを実装しようとすると
CSSのプロパティ値を細かく操作して設定することが必要になりますが
複雑なアニメーションからシンプルなものまで、
簡単かつ軽量なかたちで実装することができるプラグイン
「jQueryTween」がとても便利そうだったので紹介してみます。
jQueryTween – Lightest Tweening Engine for jQuery
jQueryTween – Lightest Tweening Engine for jQuery
「jQueryTween」は「tween.js」と併せて使用し
ハードウェアアクセラレーションを行って軽量かつ高機能なアニメーションを実現しています。
プラグインページのアニメーションデモでは
・Animating Object Size
・Animating Colors
・Transform Translation
・Transform Rotation
・Transform Scale
・Animating Background Position
・Animating Position
といったように
要素のサイズ変更や色替え、回転、拡大などなど
様々なアニメーションサンプルが用意されています。
アニメーションは再生／停止／一時停止の設定に加えて
イージングやコールバックも用意されています。
プラグインページからダウンロードできるファイルを元に
「jQueryTween」の使用方法は2通りあり
「tween.js」と使用するファイル全てがパッケージされた
「jQueryTween-aio-min.js」ファイルを使用するパターンと
◆HTML <script src=".js/jQueryTween-aio-min.js"></script>
個別にファイルを読み込むパターンに分かれています。
（何らかの理由がない限りは一つのファイルでいいのではないかと・・・）
◆HTML <script src="js/RequestAnimationFrame.js"></script> <script src="js/tween.min.js"></script> <script src="js/jQueryTween.min.js"></script>
アニメーションの指定は「.jQueryTween()」で指示します。
◆SCRIPT
$(セレクタ).jQueryTween({
～ ここにアニメーション設定 ～
});
実際のアニメーション動作については「jQueryTween」プラグインページに
たくさん紹介されているので参照してみてください。
簡単に高機能jQueryアニメーションを実装する際にぜひ。。。