js实现盒子移动动画效果

时间：2023-12-09

下面我来详细讲解一下“js实现盒子移动动画效果”的完整攻略。

基本思路

实现盒子移动动画效果的基本思路如下：

获取需要移动的盒子元素，以及目标位置的坐标；
每隔一段时间（比如10ms），计算当前盒子元素到目标位置的距离，并计算出每一个方向上的速度；
将速度叠加到盒子元素的坐标上；
如果盒子元素已经到达目标位置，则停止定时器。

具体实现

以下是具体实现的代码示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JS实现盒子移动动画效果</title>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <script>
    var box = document.getElementById('box');
    var targetLeft = 500; // 目标位置横坐标
    var targetTop = 200; // 目标位置纵坐标
    var speedX = 5; // 横坐标速度
    var speedY = 5; // 纵坐标速度

    // 定时器，每隔10ms执行一次
    var timer = setInterval(function() {
      // 获取盒子元素当前的坐标
      var left = box.offsetLeft;
      var top = box.offsetTop;

      // 计算到目标位置的距离
      var distanceX = targetLeft - left;
      var distanceY = targetTop - top;

      // 根据距离计算速度
      speedX = distanceX > 0 ? Math.min(speedX, distanceX) : Math.max(-speedX, distanceX);
      speedY = distanceY > 0 ? Math.min(speedY, distanceY) : Math.max(-speedY, distanceY);

      // 将速度叠加到盒子的坐标上
      box.style.left = left + speedX + 'px';
      box.style.top = top + speedY + 'px';

      // 如果已经到达目标位置，则停止定时器
      if (distanceX === 0 && distanceY === 0) {
        clearInterval(timer);
      }
    }, 10);
  </script>
</body>
</html>

在上述代码中，我们假设盒子元素的初始位置为左上角，需要移动到坐标为(500, 200)的位置。并且每一次移动速度为5像素，如果移动到目标点就停止定时器。示例中只实现了盒子向右下角移动的效果，但是如果想让盒子移动到其他方向，只需要调整“横坐标速度”和“纵坐标速度”的正负即可。

除此之外，为了让动画效果更加流畅，可以通过修改“每隔10ms”这个时间间隔来调整盒子移动的速度。比如如果将间隔改为20ms，则盒子移动的速度将变成原来的一半。

上一篇：手把手教你如何排查Javascript内存泄漏 下一篇：JS实现添加缓动画的方法

js实现盒子移动动画效果

基本思路

具体实现

相关文章