渐变跟随鼠标但没有赶上答案

【问题标题】：Gradient follows mouse but doesn't catch up渐变跟随鼠标但没有赶上
【发布时间】：2019-02-25 15:12:32
【问题描述】：

我已经编写了一个简单的 jQuery 脚本来创建一个径向渐变，它会延迟跟随鼠标，但由于它位于 mousemove 函数中，当鼠标停止移动时，渐变不会跟上。有没有一种简单的方法可以让渐变在鼠标停止时跟上鼠标，而不需要编写一个不断运行的函数？

var xPos = 0;
var yPos = 0;
var dX = 0;
var dY = 0;
var repeater;

$(document).mousemove(function(event) {
  windowWidth = $(window).width();
  windowHeight = $(window).height();
  mouseXpercentage = Math.round(event.pageX / windowWidth * 100);
  mouseYpercentage = Math.round(event.pageY / windowHeight * 100);

  dX = mouseXpercentage - xPos;
  dY = mouseYpercentage - yPos;

  xPos += (dX / 50);
  yPos += (dY / 50);

  $('.rgradient').css('background', 'radial-gradient(at ' + xPos + '% ' + yPos + '%, #e6e6e6, #1e1e1e)');
});

.rgradient {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: #1e1e1e;
  background: radial-gradient( at center, #e6e6e6 #1e1e1e);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="rgradient"></div>

【问题讨论】：

渐变仅在鼠标移动时移动，这取决于您的函数的设置方式（mousemove 侦听器）。相反，您应该分离逻辑，将 X、Y 的变量保留在函数之外，并保持渐变移动到鼠标光标的最终位置，即使鼠标移动停止。
要添加到 @MarsAndBack 的评论 - 您不需要连续运行的循环，您只需不断循环直到它赶上并且不再需要运行。

标签： javascript jquery gradient mousemove

【解决方案1】：

您可以使用requestAnimationFrame()，因为它每帧只运行一次：

var xPos = 0;
var yPos = 0;
var dX = 0;
var dY = 0;
var mouseRaf = null;
var gradMoveRaf = null;

$(document).mousemove(function(event) {
  if (!mouseRaf) {
    mouseRaf = requestAnimationFrame(function() {
      windowWidth = $(window).width();
      windowHeight = $(window).height();
      
      mouseXpercentage = Math.round(event.pageX / windowWidth * 100);
      mouseYpercentage = Math.round(event.pageY / windowHeight * 100);

      dX = mouseXpercentage - xPos;
      dY = mouseYpercentage - yPos;
    
      mouseRaf = null;
    });
  }
  
  if (!gradMoveRaf) {
    gradMoveRaf = requestAnimationFrame(gradMove);
  }
});

function gradMove() {
  xPos += (dX / 50);
  yPos += (dY / 50);

  $('.rgradient').css('background', 'radial-gradient(at ' + xPos + '% ' + yPos + '%, #e6e6e6, #1e1e1e)');
  
  var absX = Math.abs(mouseXpercentage - xPos);
  var absY = Math.abs(mouseYpercentage - yPos);
  
  if (absX < 1 && absY < 1) {
    gradMoveRaf = null;
    console.log("stop");
  } else {
    gradMoveRaf = requestAnimationFrame(gradMove);
    console.log("repeat");
  }
}

.rgradient {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: #1e1e1e;
  background: radial-gradient(at center, #e6e6e6 #1e1e1e);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="rgradient"></div>

【讨论】：