JS弹性运动实现方法分析

弹性运动的基本概念

我们经常使用动画效果来增强网站的视觉效果和用户体验。弹性动画效果指的是元素在运动时有一个缓冲过程，动画结束位置不是到达目标位置，而是反弹一段距离再停止。这种效果可以使我们的动画看起来更加自然、生动有趣。

JS实现弹性运动

为了实现弹性运动，我们需要用到三个变量：初始值、目标值和速度值。我们可以使用JS实现弹性运动的核心代码如下：

function elasticMove(target, finalPosition) {
  var start = target.offsetLeft;
  var distance = finalPosition - start;

  clearInterval(timer);

  var speed = distance > 0 ? 10 : -10;

  var timer = setInterval(function() {
    var current = target.offsetLeft;
    var step = current + speed;
    if (step > finalPosition && speed > 0 || step < finalPosition && speed < 0) {
      step = finalPosition;
    }
    if (step == finalPosition) {
      clearInterval(timer);
    } else {
      target.style.left = step + "px";
      speed *= -1.2;
    }
  }, 30);
}

我们可以看到代码中使用到了 setInterval() 函数和一些数学计算来实现动画效果。具体来说，我们首先获取了开始位置和目标位置，计算出它们的距离，然后定义速度值。随着元素移动，速度值将变化以实现弹性效果。

示例说明

下面是两个使用弹性运动实现动画的代码示例：

示例1：微信摇一摇动画效果

在微信摇一摇功能中，当用户摇晃手机时，界面会出现一个弹性动画效果。

<div class="wrapper">
  <img src="img/yaoyiyao.png" alt="摇一摇" class="yaoyiyao">
  <img src="img/denglu.png" alt="登录" class="denglu">
</div>

.wrapper {
  position: relative;
}
.denglu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -50px;
}

var yaoyiyao = document.querySelector('.yaoyiyao'),
  denglu = document.querySelector('.denglu');

yaoyiyao.onclick = function() {
  elasticMove(denglu, 200);
};

在这个例子中，我们将 denglu 元素的初始位置设置在底部。当 yaoyiyao 元素被点击时，我们使用 elasticMove() 函数将 denglu 元素移动到正中央位置。

示例2：拖动弹簧效果

在一些拖拽图形应用程序中，拖动元素时会出现弹性效果。

<div class="drag"></div>

.drag {
  width: 100px;
  height: 100px;
  background: #ccc;
  position: absolute;
  top: 100px;
  left: 100px;
  cursor: pointer;
}

var drag = document.querySelector('.drag');

var dragging = false,
  offsetX = 0,
  offsetY = 0;

drag.onmousedown = function(event) {
  dragging = true;
  offsetX = event.clientX - parseInt(window.getComputedStyle(drag).left);
  offsetY = event.clientY - parseInt(window.getComputedStyle(drag).top); 
};

document.onmousemove = function(event) {
  if (dragging) {
    drag.style.left = (event.clientX - offsetX) + 'px';
    drag.style.top = (event.clientY - offsetY) + 'px';
  }
};

document.onmouseup = function() {
  dragging = false;
  elasticMove(drag, 200);
};

在这个例子中，我们使用 onmousedown 事件捕捉鼠标点击，然后设置 offsetX 和 offsetY 变量以跟踪鼠标位置。接下来我们使用 onmousemove 事件来跟踪鼠标位置的变化，实现拖动的效果。最后，当用户释放鼠标时调用 elasticMove() 来实现弹性动画效果。