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アニメーションを実装する際にぜひ。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

簡単に多様なjQueryアニメーションを実装できるプラグイン「jQueryTween」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner