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

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

サイトのキャプチャ

JSTween

JSTweenの特徴

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

JSTweenのデモ

サイトのキャプチャ

デモ

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

デモのキャプチャ

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();

top of page

©2017 coliss