イージングライブラリ

前々から、イージング(徐々に速くなったり遅くなったりする機能)の処理だけをしてくれるライブラリみたいのないかなぁと思っていました。
が、なかなか見つからず、勉強の意味も含めて自作してみました。

イージング自体はこちらを参考にしました。
さらに、jQueryの構造を参考にしながら、メソッドチェーンの仕組みを取り入れてみました。

また、jQuery的なプラグイン作成も可能になっているので、独自の関数を定義することもできます。
プラグイン関数の定義方法はこちらから

これ以外に、処理をストップさせたり、途中で設定を変更するなどのイージングの処理を制御するための関数がいくつか用意されています。
その他のイージング制御関数

導入

導入は、「easing-core.js」を読み込むだけです。
下にあるデモの効果を使う場合は同時に「easing-effect.js」を読み込む必要があります。

基本構文(Syntax)

基本構文は「$e関数」に処理対象のID、始点、終点の3つの引数を渡します。
イージング値や処理時間を設定する場合は続けて「easing関数」「time関数」を実行します。
引数はそれぞれイージング値(-100~100)、ミリ秒です。
最後にプラグイン関数を実行します。

easing関数、time関数は省略可能です。
easing関数のデフォルトは0、time関数のデフォルトは1000です。

また、始点・終点の引数は配列で渡すこともできます。
配列で渡した場合は返り値も配列で返ります。プラグイン関数の「移動」を参考にしてください。

始点・終点は単位付きで渡すこともできます。
返り値の単位は始点に指定された単位となります。

デモ

非表示

フェードアウト

フェードアウトを実行します。下のボックスをクリックすると、ボックスがフェードアウトします。

click!

▲Page TOP

フェードイン

フェードインを実行します。下のボックスをクリックすると、ボックスがフェードインします。

click!

▲Page TOP

移動

移動を実行します。下のボックスをクリックすると、ボックスが移動します。

click!

▲Page TOP

拡大・縮小

拡大を実行します。下のボックスをクリックすると、ボックスが拡大します。

click!

▲Page TOP

スムーススクロール

ウィンドウのスクロールにも使えます。

▲Page TOP

おまけ

エレベータメニューなどの処理なんかにも使えます。

▲Page TOP

プラグイン関数の定義方法

プラグイン関数の定義には「$e.method」を使用します。
プラグイン関数名は$e.methodオブジェクトのプロパティとして定義します。
プラグイン関数内では、thisにより$eオブジェクト自身を参照できます。

プラグイン関数内でsetCallBack関数を使って、プラグイン関数が終了した時点で実行する関数が設定できます。
プラグイン用に用意されている関数は以下の通りです。(すべてthis付きで参照します。※this.elementなど)

element

イージングによるエフェクト効果を実行しているDOMオブジェクトを参照します。
これを使って、DOMオブジェクトの値を変更して処理を行います。

▲Page TOP

setMethod( 'プラグイン名', Functionオブジェクト )

プラグインとしての実際の処理を設定します。
引数として、第一引数にはプラグイン名を、第二引数にはプラグインとして実行したいFunctionオブジェクトを渡します。
また、第二引数のFunctionオブジェクトにはひとつの引数を持たせてください。
その引数にイージングによる結果の数値が格納されます。(下記サンプルでは「val」の部分)

▲Page TOP

setCallBack( Functionオブジェクト )

コールバック関数を設定します。
ここで設定された関数が、プラグイン関数実行完了後に実行される関数となります。

▲Page TOP

START( 'プラグイン名' )

処理を開始します。

▲Page TOP

その他のイージング制御関数

defaultEasing( -100~100 )

デフォルトのイージング値を変更します。デフォルトは0ですが、
イージング関数実行時に明示的にイージング値を指定しなくてもここで設定された値が適用されます。 設定できる数値は-100~100の間の値です。
マイナスを設定すると加速、プラスを設定すると減速になります。(0で等速)

▲Page TOP

easing( -100~100 )

実行するイージング関数のイージング値を設定します。
デフォルトは0ですが、上で説明した「defaultEasing関数」が実行されている場合はその値となります。

上記の例ではイージングを50に設定しています。
100(-100)に近づくにつれて、減速(加速)の度合いが強くなります。

▲Page TOP

time( ミリ秒 )

実行するイージング関数の実行時間をミリ秒で指定します。
デフォルトは1000です。
また、定数として「slow」「normal」「fast」が指定できます。

▲Page TOP

STOP( 'プラグイン名' )

この関数は「$e」関数から実行しません。
$e関数を実行すると、$eオブジェクトが返されます。 返された$eオブジェクトに対してこの関数を実行します。

それ以外でも、プラグイン関数を実行すると対象のDOMオブジェクト自身にイージング処理関数が設定されます。
そのため、処理対象のDOMオブジェクト自身のSTOP関数を呼ぶことで、その処理を止めることができます。
引数にプラグイン名を指定することで、該当のプラグイン関数のみを停止することができます。
すべての処理を止めるには「allSTOP関数」を実行します。
※DOMオブジェクトからアクセスするにはSTOP関数の前に「.method」をつけることに注意してください。

▲Page TOP

allSTOP()

上記で説明したように、イージング処理をされている対象のDOMオブジェクトのすべてのイージング処理を止めるための関数です。

▲Page TOP