前々から、イージング(徐々に速くなったり遅くなったりする機能)の処理だけをしてくれるライブラリみたいのないかなぁと思っていました。
が、なかなか見つからず、勉強の意味も含めて自作してみました。
イージング自体はこちらを参考にしました。
さらに、jQueryの構造を参考にしながら、メソッドチェーンの仕組みを取り入れてみました。
また、jQuery的なプラグイン作成も可能になっているので、独自の関数を定義することもできます。
プラグイン関数の定義方法はこちらから
これ以外に、処理をストップさせたり、途中で設定を変更するなどのイージングの処理を制御するための関数がいくつか用意されています。
その他のイージング制御関数
導入は、「easing-core.js」を読み込むだけです。
下にあるデモの効果を使う場合は同時に「easing-effect.js」を読み込む必要があります。
基本構文は「$e関数」に処理対象のID、始点、終点の3つの引数を渡します。
イージング値や処理時間を設定する場合は続けて「easing関数」「time関数」を実行します。
引数はそれぞれイージング値(-100~100)、ミリ秒です。
最後にプラグイン関数を実行します。
easing関数、time関数は省略可能です。
easing関数のデフォルトは0、time関数のデフォルトは1000です。
また、始点・終点の引数は配列で渡すこともできます。
配列で渡した場合は返り値も配列で返ります。プラグイン関数の「移動」を参考にしてください。
始点・終点は単位付きで渡すこともできます。
返り値の単位は始点に指定された単位となります。
プラグイン関数の定義には「$e.method」を使用します。
プラグイン関数名は$e.methodオブジェクトのプロパティとして定義します。
プラグイン関数内では、thisにより$eオブジェクト自身を参照できます。
プラグイン関数内でsetCallBack関数を使って、プラグイン関数が終了した時点で実行する関数が設定できます。
プラグイン用に用意されている関数は以下の通りです。(すべてthis付きで参照します。※this.elementなど)
プラグインとしての実際の処理を設定します。
引数として、第一引数にはプラグイン名を、第二引数にはプラグインとして実行したいFunctionオブジェクトを渡します。
また、第二引数のFunctionオブジェクトにはひとつの引数を持たせてください。
その引数にイージングによる結果の数値が格納されます。(下記サンプルでは「val」の部分)
デフォルトのイージング値を変更します。デフォルトは0ですが、
イージング関数実行時に明示的にイージング値を指定しなくてもここで設定された値が適用されます。
設定できる数値は-100~100の間の値です。
マイナスを設定すると加速、プラスを設定すると減速になります。(0で等速)
実行するイージング関数のイージング値を設定します。
デフォルトは0ですが、上で説明した「defaultEasing関数」が実行されている場合はその値となります。
上記の例ではイージングを50に設定しています。
100(-100)に近づくにつれて、減速(加速)の度合いが強くなります。
実行するイージング関数の実行時間をミリ秒で指定します。
デフォルトは1000です。
また、定数として「slow」「normal」「fast」が指定できます。
この関数は「$e」関数から実行しません。
$e関数を実行すると、$eオブジェクトが返されます。 返された$eオブジェクトに対してこの関数を実行します。
それ以外でも、プラグイン関数を実行すると対象のDOMオブジェクト自身にイージング処理関数が設定されます。
そのため、処理対象のDOMオブジェクト自身のSTOP関数を呼ぶことで、その処理を止めることができます。
引数にプラグイン名を指定することで、該当のプラグイン関数のみを停止することができます。
すべての処理を止めるには「allSTOP関数」を実行します。
(※DOMオブジェクトからアクセスするにはSTOP関数の前に「.method」をつけることに注意してください。)