Mousemove animasyonu, geçiş devresinde geçiş sürüyor

Question

Fare hareket ettiğinde biraz hareket etmek istediğim küçük parçacıklara sahibim. Onların konumları ebeveynlerine göre. Hareket, kromda istediğim gibi, çok pürüzsüz ve ince ama ateşböceği içinde çok fazla zaman harcıyor.

This Yapmaya çalıştığım şeyin basitleştirilmiş jsfiddle sürümüdür. Hem krom hem de firefox'ta açın ve hareketleri karşılaştırın.

Bu jquery MouseMove()

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

Biliyorum bu geçiş özelliklerini kaldırmak çünkü eğer parçacıkların geçiş ile ilgisi var kullandığı JavaScript kodu, animasyonlar her iki tarayıcılarda aynı ama ihtiyacım Bu geçiş süresi ve bu parçacıkların diğer hareketlerinden dolayı gevşeme. Öyleyse bu fikrin ne olabileceği hakkında bir fikrin var mı?

Ayrıca, kodum hakkında garip veya yanlış bir şey varsa, düzeltmek için çekinmeyin. Mümkün olduğunca hızlı öğrenmeye hevesliyim.

Answer 1

sorunların o tür çözen sihirli bir işlevi vardır: http://underscorejs.org/#throttle

Ya da burada olduğu gibi requestAnimationFrame kullanma hakkında gidebilir: How to use requestAnimationFrame in mousemove event?

Örnek kısıtlama ile: Eh

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