JS实现匀速与减速缓慢运动的动画效果封装示例

下面我将详细讲解如何实现 JS 实现匀速与减速缓慢运动的动画效果封装。

1. 匀速缓动动画

步骤如下：

1. 获取元素的起始位置和目标位置
2. 计算元素移动的距离和移动的总时间
3. 每个时间间隔移动元素的距离
4. 将元素移动到目标位置

示例代码：

/**
 * @param {HTMLElement} el
 * @param {number} target
 * @param {number} duration
 */
function animate(el, target, duration) {
  var start = parseInt(getComputedStyle(el).left)
  var distance = target - start
  var interval = 15 // 时间间隔
  var speed = distance / (duration / interval) // 每个时间间隔移动的距离
  var timer = null

  timer = setInterval(function () {
    var left = parseInt(getComputedStyle(el).left) + speed
    if ((speed > 0 && left > target) || (speed < 0 && left < target)) {
      left = target
    }
    el.style.left = left + 'px'
    if (left === target) {
      clearInterval(timer)
    }
  }, interval)
}

2. 减速缓动动画

步骤如下：

1. 获取元素的起始位置和目标位置
2. 计算元素移动的距离和移动的总时间
3. 每个时间间隔移动元素的距离
4. 计算速度，速度递减
5. 将元素移动到目标位置

示例代码：

/**
 * @param {HTMLElement} el
 * @param {number} target
 * @param {number} duration
 */
function animate(el, target, duration) {
  var start = parseInt(getComputedStyle(el).left)
  var distance = target - start
  var interval = 15 // 时间间隔
  var timer = null
  var speed = 0 // 初始速度
  var a = 0.0005 // 减速度

  timer = setInterval(function () {
    var left = parseInt(getComputedStyle(el).left) + speed
    if ((speed > 0 && left > target) || (speed < 0 && left < target)) {
      left = target
    }
    el.style.left = left + 'px'
    // 计算速度，速度递减
    speed += (target - left) * a
    if (left === target) {
      clearInterval(timer)
    }
  }, interval)
}

以上是两个封装示例，可以根据实际需求选用。有关更多动画效果的示例，可查看相关学习资料。