在一系列值中动画效果

我创建了一个光标，当您移动它时可以使其具有动画效果。它从一片蓝色变成红色。当您不移动光标时，动画将暂停。在一系列值中动画效果

光标移动的像素数量正在计数（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;} 
}

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

来源

2015-09-27 jack_of_all_trades

很酷的小提琴顺便说一句。 – Jesse

@Jesse谢谢！ :) –

这只是一个想法，没有测试过，但也许不是使用CSS转换来改变颜色，使用RGB颜色，只是将颜色设置为鼠标移动。基本上，在每个高达10000px的间隔时，根据移动的像素数量，在每次更新时将其设置为新颜色。如果颜色取决于移动像素的数量，那么也可以避免暂停和停止转换。但是，使用此解决方案时，您需要设计一个公式来确定颜色。

来源

2015-09-27 03:13:20 Imperialized

这听起来像个好主意。我想我有一个可能工作的公式。我会稍微尝试一下。谢谢！ –

让我们知道您是否想出解决方案 – Imperialized

不客气。希望能帮助到你。让我们更新！ – Imperialized

在一系列值中动画效果

回答

相关问题