作った。
いわゆるGoogleMapのようなものを作りたい場合に使えるやつ。
まあだいたいはDOMイベントまわりまで面倒みてくれるライブラリを使う事が多いとは思うけど、そのすべてを自作しないといいけない場合、こういう部品だけがあるのも便利かと思い。
Moment of inertia
物理学的な難しいことはわからないけども、今回の実装としてはこんな感じになってる。
- スイッチオン
- 線形に増えたり減ったりする移動量をインプット
- スイッチオフ
- すると、その時点までで貯められていた力を、徐々に摩擦で減らしながらイベント発火
たとえば`touchstart`でスイッチオンして、`touchmove`の間に力を溜める、`touchend`で解放！という感じの使い方。
const iState = new InertiaState(); $box.addEventListener("pointerdown", ({ clientX, clientY }) => { iState.start([clientX, clientY]); }); $box.addEventListener("pointermove", ({ clientX, clientY }) => { iState.update([clientX, clientY]); }); $box.addEventListener("pointerup", () => { iState.stop(); }); iState.addCallback((ev) => { state.position[0] += ev.delta[0]; state.position[1] += ev.delta[1]; }); // iState.reset();
コードとしてはNodeでもどこでも動くように書いてあるので、タッチイベントでなくともどんなインプットでも取れるようになってる。（使いみちがあるかは思いつかなかったけども）
コンストラクタ引数で摩擦係数を指定できるようにしてあって、基本的には`1`以下の値を指定する。
これを`1`以上にしちゃうと、永遠に勢いが減衰しなくて、無限にスーって飛んでいっておもしろかった・・ｗ