自分の中で「魔法の式」と呼んでいる式です。以下のような動きが実現できます。マウスカーソルを枠内に入れてみてください。スライダーで動きの調整も可能です。
- 加速力
- 摩擦力
- 速さ
この動きを実現しているのがこんな式です。
移動量 = (移動量 + (目的地 - 現在地) / 摩擦力) * 加速力
現在地 += 移動量 * 速さ上記のサンプルではX軸とY軸でそれぞれ移動量を出しています。具体的にはこんな感じ。
//moveX, moveY: 移動量
//toX, toY: 目的地（今回はカーソルの位置）
//x, y: 現在地（赤い丸の位置）
//friction: 摩擦力
//accel: 加速力
moveX = (moveX + (toX - x) / friction) * accel;
moveY = (moveY + (toY - y) / friction) * accel;
x += moveX * speed;
y += moveY * speed;
ball.style.left = x + "px";
ball.style.top = y + "px";ゲームなんかで使えそうですかね。