[JS]簡単な記述で、軽快で滑らかなアニメーションが実装できるスクリプト -JSTween

オブジェクトの移動や拡大・縮小、不透明度の変更、CSS3のシャドウや角丸などを滑らかアニメーションで簡単に実装できるjQueryのプラグインを紹介します。
アニメーションのエフェクトは、31種類！

JSTween

[ad#ad-2]

• JSTweenの特徴
• JSTweenのデモ
• JSTweenの使い方

JSTweenの特徴

• 軽快に動作し、パフォーマンスに優れています。
• アニメーションを使った複雑なインタラクションが実装できます。
• フレームレートを使ったスムーズなアニメーション。
• 実装はjQueryベースで簡単。
• 簡単に始められ、シンプルに実行できます。

JSTweenのデモ

デモ

[ad#ad-2]

デモでは数多くのアニメーションがあり、その中からいくつか紹介します。

Positon
矩形のポジションをアニメーションで変更します。

Dimensions
矩形のサイズをアニメーションで変更します。

Opacity
矩形の不透明度をアニメーションで変更します。

CSS3 Rotate
矩形をアニメーションで回転させます。

CSS3 Box Shadow
矩形にボックスシャドウをアニメーションで適用します。

CSS3 Border Radius
矩形をアニメーションで角丸にします。

JSTween>JSTweenの使い方

JSTweenの記述はシンプルです。

$( element ).tween( { property : options } );

tween()のオプションのパラメータは下記のものがあります。

start

アニメーション開始時の値

stop

アニメーション終了時の値

time

アニメーション開始の時間

duration

アニメーションの持続時間

units

付与するべきCSSの単位

effect

エフェクトの種類

onStart

アニメーション開始時のコールバック

onFrame

フレーム後のコールバック

onStop

アニメーション停止時のコールバック

パラメータを使用すると下記のようになります。

$('.target').tween({
   left:{
      start: 0,
      stop: 100,
      time: 0,
      duration: 1,
      units: 'px',
      effect: 'easeInOut',
      onStop: function(){
        alert( 'Done!' );
      }
   }
});

$.play();