在一系列值中動畫效果

Question

我創建了一個光標，當您移動它時可以使其具有動畫效果。它從一片藍色變成紅色。當您不移動光標時，動畫將暫停。

光標移動的像素數量正在計數（var mousetravel），並顯示在屏幕的左上角。該變量每20毫秒更新一次。

現在，光標的動畫是用CSS完成的。但是，這依賴於動畫持續時間。此時持續時間設置爲4秒。

因此，基本上，如果您不斷移動光標，顏色變化將在4秒後完成。我想要做的是在光標移動10000像素後顏色發生變化;我希望顏色的變化取決於光標所移動像素的數量，而不是像現在這樣的定時持續時間。

我真的不知道我該如何解決這個問題。

我希望這是有道理的。我很樂意澄清任何事情。

Here is the jsfiddle

的的jsfiddle有更多的代碼，但我會後與我在這裏談論專門處理代碼：

HTML

<div class='cursor_transistion' id='cursor'> 
    &nbsp; 
</div> 

CSS

.cursor_transistion { 
    animation-name: cursor_transistion; 
    animation-duration: 4s; 
    animation-play-state: running; 
} 

@keyframes cursor_transistion { 
    0% {background-color: #7AA8CE;} 
    100% {background-color: #CE7A7A;} 
} 

JS

var $mouseX = 0, $mouseY = 0; 
var $xp = 0, $yp =0; 

$(document).mousemove(function(e){ 
    $mouseX = e.pageX; 
    $mouseY = e.pageY;  
}); 

var $loop = setInterval(function(){ 
// change 12 to alter damping higher is slower 
$xp += (($mouseX - $xp)/12); 
$yp += (($mouseY - $yp)/12); 
$("#cursor").css({left:$xp +'px', top:$yp +'px'}); 
}, 30); 

var timestamp = null; 
var lastMouseX = null; 
var lastMouseY = null; 

var mrefreshinterval = 500; // update display every 500ms 
var lastmousex=-1; 
var lastmousey=-1; 
var lastmousetime; 
var mousetravel = 0; 
var lastmousetravel = 0; 

//pauses CSS color animation while cursor is not moving 
setInterval(function() { 
     if (lastmousetravel === mousetravel){ 
      $('.cursor_transistion').css('animation-play-state', 'paused'); 
     } else { 
      $('.cursor_transistion').css('animation-play-state', 'running'); 
     } 
    }, 20); 

$('html').mousemove(function(e) { 
    var mousex = e.pageX; 
    var mousey = e.pageY; 
    if (lastmousex > -1) 
     mousetravel += Math.max(Math.abs(mousex-lastmousex), Math.abs(mousey-lastmousey)); 
    lastmousex = mousex; 
    lastmousey = mousey; 
    var speed = lastmousex + lastmousey; 

    setTimeout(function(){ 
     lastmousetravel = mousetravel; 
    }, 20); 
}); 

Answer 1

這只是一個想法，沒有測試過，但也許不是使用CSS轉換來改變顏色，使用RGB顏色，只是將顏色設置爲鼠標移動。基本上，在每個高達10000px的間隔時，根據移動的像素數量，在每次更新時將其設置爲新顏色。如果顏色取決於移動像素的數量，那麼也可以避免暫停和停止轉換。但是，使用此解決方案時，您需要設計一個公式來確定顏色。