logo标签列表

JavaScript实现移动过渡效果，无需使用CSS

javascripthtmlcsstransition
3
我正在使用一个小脚本来跟随光标移动
元素。 这个脚本使元素严格跟随光标。 我想要做的是在“跟随”光标的过程中添加一些持续时间。我尝试了CSS过渡，但动画总是会出现问题。有人能帮我解决这个问题吗？
假设鼠标在某个位置，然后它的位置改变了大约100px。我想指定持续时间，就像我使用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>

I was wondering how to add a transition without using the CSS but I'm not the most advanced when it comes to JavaScript.

[编辑]：我不想使用window.setTimeout。
[编辑2]：我想使用transition: 0.1s;，但正如我所说，当用户移动鼠标太快时，它会破坏效果。
你好，这是否是你想要做的？ https://codepen.io/matthewpageuk/pen/ZwYEKp 球会跟随鼠标移动。 - Matthew Page
没错！但我在想...你的代码只有在鼠标移动时才执行...当鼠标停止移动时...我就有问题了...无论如何还是谢谢！ - Shape
那么，如果鼠标没有触发事件，而您又不想使用CSS过渡或setTimeout，那么您如何想象进行动画呢？ - trincot
你看过 window.requestAnimationFrame() 吗？它基本上就是为这种情况而设计的。你想要做的就是在每秒钟 30 或 60 次的频率下执行 mousemove 块中的操作。 - Matthew Page
@AleksanderCiecierski 我已经更新了代码以展示它的运作方式 https://codepen.io/matthewpageuk/pen/ZwYEKp ，如果你想要更精细一些，可以在球找到鼠标时停止动画。 - Matthew Page
显示剩余2条评论
2个回答
2

有很多种方法可以做到这一点，就像你在其他答案中看到的那样，每种方法都有自己的“感觉”。我只是再添加一种，在这种方法中，点通过剩余距离的百分比接近光标。

最初的回答

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>

依我看，这是一个很好的解决方案！ - trincot
1
你可以使用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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接