在Javascript中平滑鼠标动画

Question

我正在尝试根据鼠标移动创建一个简单的动画。放置在屏幕中央的物体应根据鼠标移动从中心拉开。但是当我尝试这样做时，尽管鼠标移动平稳，但物体仍然会抖动很多。

我创造了一个小提琴来表明问题：https://jsfiddle.net/ahof0gLc/

鼠标移动时，对象移动如下：

animX += event.movementX||event.mozMovementX||event.webkitMovementX||0;

然后将它拉回中心，如下所示：

if (animX) animX *= Math.pow(0.99, delta);

我尝试了几种方法。但是因为鼠标移动抵消了减速，所以它会动摇不安。我怎样才能解决这个问题？

Answer 1

更新了真正的hacky弹簧模型。使用鼠标悬停鼠标离开鼠标。

https://jsfiddle.net/eex3aphm/

---

你的鼠标移动和你的动画之间的斗争。

我更改了鼠标移动处理程序以使用临时变量来保持移动：

var pullX = 0;
var onMouseMove = function(event) {
        event.preventDefault();
        pullX = event.movementX||event.mozMovementX||event.webkitMovementX||0;
};

然后将更新移动到减速方程式：

animX = (animX + pullX) * Math.pow(0.99, delta);
pullX = 0;

这可以防止你在鼠标移动时减速。

https://jsfiddle.net/r57t7v3o/