不使用 CSS 的 JavaScript 移动过渡答案

【问题标题】：JavaScript Moving transition without the use of CSS不使用 CSS 的 JavaScript 移动过渡
【发布时间】：2019-01-22 18:49:32
【问题描述】：

我正在使用一个小脚本来跟踪带有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 方面我并不是最先进的。

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

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

【问题讨论】：

您好，这看起来像您想要做的吗？ codepen.io/matthewpageuk/pen/ZwYEKp球跟随鼠标？
没错！但我想知道......您的代码仅在鼠标移动时执行......当鼠标停止移动......然后我有一个问题......无论如何，谢谢！
所以如果鼠标没有触发事件，并且你不想要 CSS 过渡也不想要setTimeout，那么你如何想象做动画呢？
那么动画就必须一直运行，但这不是一个好主意...
你看过 window.requestAnimationFrame() 吗，它有点用于这种类型的事情。你基本上想做你在 mousemove 块中所做的事情，但每秒 30 或 60 次。

标签： javascript html css transition

【解决方案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>

【讨论】：

如果你问我很好的解决方案！

【解决方案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>

【讨论】：