gpt4 book ai didi

javascript - 在值范围内进行动画处理

转载 作者:行者123 更新时间:2023-11-28 06:53:01 27 4
gpt4 key购买 nike

我创建了一个光标,当您移动它时它的颜色会呈现动画。它从蓝色变为红色。当您不移动光标时,动画将暂停。

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

最佳答案

这只是一个想法,未经测试,但也许不使用 CSS 过渡来更改颜色,而是使用 RGB 着色并在鼠标移动时设置颜色。基本上,在每次更新时,根据移动的像素数,在最多 10000px 的每个间隔将其设置为新颜色。如果颜色取决于移动的像素数,这也将消除暂停和停止过渡的需要。但是,使用此解决方案,您需要设计一个公式来确定颜色。

关于javascript - 在值范围内进行动画处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32804158/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com