javascript - Firefox 中的鼠标移动动画与过渡滞后

Question

我有一堆小颗粒，我想在鼠标移动时稍微移动它们。他们的地位是相对于 parent 而言的。在 Chrome 中，运动效果完全符合我的要求，非常平滑和微妙，但在 Firefox 中滞后很多。

This是我想做的事情的 jsfiddle 简化版本。在 chrome 和 firefox 中打开它并比较 Action 。

这是使用 jquery mousemove() 的 JavaScript 代码

var centerX = window.innerWidth/2,
    centerY = window.innerHeight/2;

    $('body').mousemove(function(e){
  var clientX = e.clientX,
      clientY = e.clientY,
      amountMovedX = (centerX - clientX)/20,
      amountMovedY = (centerY - clientY)/20;
  if(clientX > centerX){
    amountMovedX *= -1;
  }

            $('#rect1').css('transform','translate3d('+amountMovedX*1.1+'px,'+amountMovedY+'px, 0) rotate(-15deg)');
                    $('#rect2').css('transform','translate3d('+amountMovedX*1.8+'px,'+amountMovedY*1.4+'px, 0)');
                    $('#rect3').css('transform','translate3d('+amountMovedX*0.8+'px,'+amountMovedY*1.9+'px, 0) rotate(30deg)');
                    $('#rect4').css('transform','translate3d('+amountMovedX*1.6+'px,'+amountMovedY*0.7+'px, 0)');

                    $('#rect5').css('transform','translate3d('+amountMovedX*-1.7+'px,'+amountMovedY*1.1+'px, 0) rotate(30deg');
                    $('#rect6').css('transform','translate3d('+amountMovedX*-0.8+'px,'+amountMovedY*1.9+'px, 0)');
                    $('#rect7').css('transform','translate3d('+amountMovedX*-1.3+'px,'+amountMovedY*0.9+'px, 0) rotate(-30deg');
                    $('#rect8').css('transform','translate3d('+amountMovedX*-0.5+'px,'+amountMovedY*1.5+'px, 0) rotate(-15deg)');
        });

我认为这与粒子的过渡有关，因为如果我删除过渡属性，动画在两个浏览器中是相同的，但由于这些粒子的其他一些运动，我需要这个过渡时间和缓动。那么有什么想法可能会导致这种情况吗？

如果我的代码有什么奇怪或错误的地方，请随时纠正它。我渴望尽快了解更多信息。

Answer 1

有一个神奇的函数可以解决这类问题: http://underscorejs.org/#throttle

或者你可以像这里一样使用 requestAnimationFrame : How to use requestAnimationFrame in mousemove event?

节流示例:

var th=_.throttle(function(opts){//opts={x:...,y:...}
 //do your stuff here
},100);

$(document).on('mousemove',function(e){
 th({x:e.pageX,y:e.pageY});
});