イージング関数（tween）

7 種類のイージングの系統があり、それぞれに easeIn と easeOut があります。中身は純粋な数式で、DOM も、自前の RAF のループも持ちません。自分のアニメーションフレームから現在の時刻を渡すと、そのフレームで使うべき値が返ります。

引数は Robert Penner による古典的な流儀に従います。

t：現在の時刻（どれだけ経ったか）
b：始まりの値
c：値の変化量（終わりの値は b + c）
d：継続時間

どの関数も内部で t >= d のときに値を抑えるので、終わりを過ぎて呼んでも、範囲の外へ外挿せずに最終的な値を返します。

使い方

import { cubic } from 'ranuts/utils';

const start = performance.now();
const tick = (now: number) => {
  const x = cubic.easeOut(now - start, 0, 300, 600); // 600ms かけて 0 → 300
  el.style.transform = `translateX(${x}px)`;
  if (now - start < 600) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);

使える曲線

エクスポート	曲線	感じ
`quad`	2 次（`t²`）	いちばん穏やかな加速。無難な既定値
`cubic`	3 次（`t³`）	`quad` よりはっきりきびきびします
`quart`	4 次（`t⁴`）	力強い加速
`quint`	5 次（`t⁵`）	とても力強く、動きの印象を終わり際が支配します
`sine`	正弦	どれよりも柔らかく、イージングとしてほとんど気づかれません
`expo`	指数	ほとんど止まっていて、そこから一気に走り出します
`circ`	円	ゆっくり始まり、終わりがとても唐突です

API

どのエクスポートも同じ形をしています。

interface SpeedType {
  easeIn: EasingFn;
  easeOut: EasingFn;
}

type EasingFn = (t: number, b: number, c: number, d: number) => number;

easeIn / easeOut

パラメーター

パラメーター	説明	型	既定値
`t`	経過した時間	`number`	必須
`b`	始まりの値	`number`	必須
`c`	値の変化量（終わりは `b + c`）	`number`	必須
`d`	継続時間	`number`	必須

戻り値

引数	説明	型
`value`	時刻 `t` における値	`number`

補足

easeIn はゆっくり始まって加速し、easeOut は速く始まって減速します。利用者の操作に応える UI では、たいてい easeOut のほうが自然に見えます。まずためらってから動くのではなく、すぐ動き出して落ち着くからです。

zhangxinxu/Tween に感謝します。