Question

我有一堆小颗粒，当鼠标移动时我想稍微移动一下。他们的立场与父母有关。这款机芯非常符合我想要的镀铬，非常流畅和微妙，但在firefox中却落后了很多。

This是我试图做的简化版本。在chrome和firefox中打开它并比较运动。

这是使用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});
});

mousemove动画在firefox中有过渡滞后

1 个答案: