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)));
    }

和im循环遍历div / pictures，如果距离小于100，则计算其不透明度/比例。

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

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

有什么办法或捷径可以解决这个问题，因为我称之为摇晃或犹豫不决？

Answer 1

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

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

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

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

摇晃的比例动画

1 个答案: