摇晃的比例动画

Question

我正在做小马赛克(如果我可以这样称呼它).我正在根据位置鼠标和图片/ div的中心改变比例和不透明度.

我正在通过vektors计算距离

 function calculateDistance(elem, mouseX, mouseY) {
        return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offsetLeft + (elem.offsetWidth / 2)), 2) + Math.pow(mouseY - (elem.offsetTop + (elem.offsetHeight / 2)), 2)));
    }

并且我循环遍历div /图片,如果距离小于100,则计算其不透明度/比例.

但是我遇到了一个问题,即不透明度/比例变化的动画有点不稳定.如果它应该做某事似乎犹豫不决.

演示= http://jsfiddle.net/Trolstover/x9fpv8pb/5/

是否有任何方法或捷径如何解决,因为我称之为摇晃或犹豫？

Answer 1

你遇到的最大问题是-webkit-transitionCSS 中的规则。如果您尝试使用 CSS 转换元素并使用 JS 每秒更改值 60 次，它就会闪烁。

另外，您可能不应该为每个元素添加事件侦听器。这会导致不必要的操作。相反，您可以在其父级上添加一个（我将其添加到nav）。

还有一些优化的空间，这进一步平滑了过渡。结果如下：

http://jsfiddle.net/ilpo/x9fpv8pb/16/