js实现拖动缓动效果

实现拖动缓动效果，需要用到JavaScript中的定时器和数学运算等技术。下面我来详细讲解一下整个过程。

第一步：获取元素位置

首先，我们需要获取需要拖动的元素以及它的位置。在代码中，我们通常会使用getBoundingClientRect()方法来获取元素的绝对位置。

const dragElem = document.querySelector('.drag-elem');
const rect = dragElem.getBoundingClientRect();
const startX = rect.x;
const startY = rect.y;

第二步：鼠标按下事件

接下来，我们需要绑定鼠标按下事件，这样才能够响应用户的拖动动作。在按下事件中，我们需要获取鼠标的初始位置，并且需要启动一个定时器来实现缓动效果。

let startX = 0;
let startY = 0;
let timer = null;

dragElem.addEventListener('mousedown', function(e) {
  startX = e.clientX;
  startY = e.clientY;

  clearInterval(timer);

  timer = setInterval(function() {
    // ...
  }, 10);
});

第三步：鼠标移动事件

在鼠标移动事件中，我们需要实时计算出当前鼠标的位置，并且根据拖动的距离计算出元素应该在的位置。这里需要注意的是，我们需要根据鼠标移动时的距离计算出拖动的距离，以便缓动效果的实现。

dragElem.addEventListener('mousemove', function(e) {
  const disX = e.clientX - startX;
  const disY = e.clientY - startY;
  const currentX = rect.x + disX;
  const currentY = rect.y + disY;

  dragElem.style.transform = `translate(${currentX}px, ${currentY}px)`;
});

第四步：定时器处理

在定时器处理函数中，我们需要计算出元素的目标位置，并且根据缓动效果逐渐将它移动到目标位置。这里需要使用一些数学运算。

timer = setInterval(function() {
  const targetX = startX + (distanceX / 2);
  const targetY = startY + (distanceY / 2);
  const currentX = rect.x + (targetX - rect.x) / 10;
  const currentY = rect.y + (targetY - rect.y) / 10;

  dragElem.style.transform = `translate(${currentX}px, ${currentY}px)`;

  if (Math.abs(currentX - targetX) < 1 && Math.abs(currentY - targetY) < 1) {
    clearInterval(timer);
  }
}, 10);

示例说明

下面是两个示例，分别演示了拖动一个矩形和拖动一个球的缓动效果。

示例一：拖动一个矩形

<div class="drag-elem" style="width: 100px; height: 100px; background-color: red;"></div>

<script>
  const dragElem = document.querySelector('.drag-elem');
  const rect = dragElem.getBoundingClientRect();
  let startX = 0;
  let startY = 0;
  let timer = null;

  dragElem.addEventListener('mousedown', function(e) {
    startX = e.clientX;
    startY = e.clientY;

    clearInterval(timer);

    timer = setInterval(function() {
      const distanceX = e.clientX - startX;
      const distanceY = e.clientY - startY;
      const targetX = startX + (distanceX / 2);
      const targetY = startY + (distanceY / 2);
      const currentX = rect.x + (targetX - rect.x) / 10;
      const currentY = rect.y + (targetY - rect.y) / 10;

      dragElem.style.transform = `translate(${currentX}px, ${currentY}px)`;

      if (Math.abs(currentX - targetX) < 1 && Math.abs(currentY - targetY) < 1) {
        clearInterval(timer);
      }
    }, 10);
  });

  dragElem.addEventListener('mousemove', function(e) {
    const disX = e.clientX - startX;
    const disY = e.clientY - startY;
    const currentX = rect.x + disX;
    const currentY = rect.y + disY;

    dragElem.style.transform = `translate(${currentX}px, ${currentY}px)`;
  });
</script>

示例二：拖动一个球

<style>
  .ball {
    width: 50px;
    height: 50px;
    background-color: orange;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

<div class="ball"></div>

<script>
  const ball = document.querySelector('.ball');
  const rect = ball.getBoundingClientRect();
  let startX = 0;
  let startY = 0;
  let timer = null;

  ball.addEventListener('mousedown', function(e) {
    startX = e.clientX;
    startY = e.clientY;

    clearInterval(timer);

    timer = setInterval(function() {
      const distanceX = e.clientX - startX;
      const distanceY = e.clientY - startY;
      const targetX = startX + (distanceX / 2);
      const targetY = startY + (distanceY / 2);
      const currentX = rect.x + (targetX - rect.x) / 10;
      const currentY = rect.y + (targetY - rect.y) / 10;

      ball.style.transform = `translate(${currentX}px, ${currentY}px)`;

      if (Math.abs(currentX - targetX) < 1 && Math.abs(currentY - targetY) < 1) {
        clearInterval(timer);
      }
    }, 10);
  });

  ball.addEventListener('mousemove', function(e) {
    const disX = e.clientX - startX;
    const disY = e.clientY - startY;
    const currentX = rect.x + disX;
    const currentY = rect.y + disY;

    ball.style.transform = `translate(${currentX}px, ${currentY}px)`;
  });
</script>