easing selector

RADIX では、Robert Penner’s Easing Functions を内包しています。イージングセレクタには linear, easeIn, easeOut, easeInOut の4種類があり、linear 以外には変化の強度に6段階あります。（イージングの例一覧）
変化の強度が緩い方から順に

• Sine
• Quad
• Cubic
• Quart
• Quint
• Expo

の6段階あり、easeInQuart のように表記します。

それ以外にも特殊なイージングとして

• Circ : Expo に似ているが加速・減速時間が緩やか
• Back : 少し行き過ぎてから戻る
• Elastic : バネのように振動する
• Bounce : ボールを投げたように放物線運動で跳ね返る

という設定があり、それぞれ In, Out, InOut が利用できます。

‘ease-in’, ‘ease-out’, ‘ease-in-out’ のように css イージング名での指定にも対応させており、その場合は Quad として適用されます。

Usage

radix.getEasing(easingName);

Radix インスタンスの getEasing プロパティで取得できます。引数 easingName は文字列型でイージング関数名が与えられることを期待します。

返り値は関数型でイージング関数が返されます。

const easing = radix.getEasing('easeOutExpo');
let current_var = easing(elapsedTime, baseVal, changeVal, duration);

返されたイージング関数は setInterval など、javascript で時間変化をさせる処理の中で利用します。
必要な引数は4つです。

• 第一引数：処理の開始から経過した時間を渡します。型は float 型で単位はミリ秒です。
• 第二引数：変化させる値の、変化前の値を渡します。型は float を期待します。
• 第三引数：変化させる値の、変化前と変化後の偏差を渡します。型は float を期待します。
• 第四引数：変化にかける時間を与えます。型は float 型で単位はミリ秒です。