Question

我正在使用一个小的脚本，在光标后跟随一个div元素。该脚本使元素严格跟随光标。我想做的是在“跟随”光标的过程中增加某种持续时间。我尝试了CSS过渡，但是动画总是以破裂而告终。有人可以帮我吗？

比方说，鼠标在某处，然后将位置改变约100像素。我想指定持续时间，就像我使用CSS一样...但是问题是我不能使用任何过渡，而只能使用一些JavaScript魔术...

document.body.addEventListener("mousemove", function(e) {

  var curX = e.clientX;
  var curY = e.clientY;

  document.querySelector('mouse').style.left = curX - 10 + 'px';
  document.querySelector('mouse').style.top = curY - 10 + 'px';

});

body {
  background: #333;
  height: 500px;
  width: 500px;
}
mouse {
  display: block;
  position: fixed;
  height: 20px;
  width: 20px;
  background: #fff;
  border-radius: 50%;
}

<body>
  <mouse></mouse>
</body>

我想知道如何在不使用CSS的情况下添加过渡，但是在JavaScript方面我不是最高级的。

[edit]：我不想使用window.setTimeout。

[edit 2]：我想使用transition: 0.1s;，但正如我所说，当用户快速移动鼠标时，它会破坏效果。

Answer 1

有很多方法可以做到这一点，正如您在其他答案中所看到的那样，每种方法都有自己的“感觉”。我要再添加一个，其中点以剩余距离的百分比接近光标。

let curX = 0, curY = 0, elemX = null, elemY = null;
document.body.addEventListener("mousemove", function(e) {
  curX = e.clientX;
  curY = e.clientY;
  if (elemX === null) [ elemX, elemY ] = [ curX, curY ];
});

let amt = 0.1; // higher amount = faster tracking = quicker transition
let elem = document.querySelector('mouse');
let frame = () => {
  requestAnimationFrame(frame);
  elemX = (elemX * (1 - amt)) + (curX * amt);
  elemY = (elemY * (1 - amt)) + (curY * amt);
  elem.style.left = `${elemX}px`;
  elem.style.top = `${elemY}px`;
};
frame();

body {
  position: absolute;
  background: #333;
  left: 0; top: 0; margin: 0; padding: 0;
  height: 100%;
  width: 100%;
}
mouse {
  display: block;
  position: absolute;
  height: 20px; margin-left: -10px;
  width: 20px; margin-top: -10px;
  background: #fff;
  border-radius: 50%;
}

<body>
  <mouse></mouse>
</body>

Answer 2

您可以使用setTimeout()函数来引入延迟：

document.body.addEventListener("mousemove", function(e) {
  var delay=250 //Setting the delay to quarter of a second
  setTimeout(()=>{
      var curX = e.clientX;
      var curY = e.clientY;
      
      document.querySelector('mouse').style.left = curX - 10 + 'px';
      document.querySelector('mouse').style.top = curY - 10 + 'px';
  },delay)

});

body {
  background: #333;
  height: 500px;
  width: 500px;
}
mouse {
  display: block;
  position: fixed;
  height: 20px;
  width: 20px;
  background: #fff;
  border-radius: 50%;
}

<body>
  <mouse></mouse>
</body>

或者，为避免拖尾，请使用一个间隔并将光标移至正确的方向（更改ratio以设置速度比）：

var curX,curY
document.body.addEventListener("mousemove", function(e) {
    curX = e.clientX;
    curY = e.clientY;

});
setInterval(()=>{
    var ratio=5
    var x=document.querySelector('mouse').offsetLeft+10
    var y=document.querySelector('mouse').offsetTop+10
    document.querySelector('mouse').style.left=((curX-x)/ratio)+x-10+"px"
    document.querySelector('mouse').style.top=((curY-y)/ratio)+y-10+"px"
},16)

body {
  background: #333;
  height: 500px;
  width: 500px;
}
mouse {
  display: block;
  position: fixed;
  height: 20px;
  width: 20px;
  background: #fff;
  border-radius: 50%;
}

<body>
  <mouse></mouse>
</body>

不使用CSS的JavaScript移动过渡

2 个答案: