Градиент следует за мышью, но не догоняет - PullRequest
Новая
       9

Градиент следует за мышью, но не догоняет

0 голосов
/ 25 февраля 2019

Я собрал простой скрипт 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>

1 Ответ

0 голосов
/ 25 февраля 2019

Вы можете использовать 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>
...