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/

在Javascript中平滑鼠标动画

1 个答案: