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时，根据移动的像素数在每次更新时将其设置为新颜色。如果颜色取决于移动的像素数，那么也可以摆脱暂停和停止转换的需要。但是，使用此解决方案，您需要设计一个公式来确定颜色。

在一系列值中进行动画处理

1 个答案: