JavaScript 中的时间版运动

在网页开发中，实现元素的动画效果是常见的需求。而基于时间的运动（Time-based Animation）是一种优雅且高效的方式。它通过控制元素在不同时间点的状态（如位置、大小、颜色等）来创建平滑的动画过渡。在 JavaScript 中，我们可以利用内置的定时器（setInterval、requestAnimationFrame 等）以及一些数学计算来实现时间版运动。本文将详细介绍 JavaScript 中时间版运动的原理、实现方法以及最佳实践。

目录#

原理#

时间版运动的核心思想是将动画分解为一系列微小的步骤，每个步骤在特定的时间间隔内更新元素的状态。通过不断重复这个过程，我们可以看到元素的平滑运动。在 JavaScript 中，我们可以利用定时器来触发这些更新步骤。

基本实现方法#

使用 setInterval#

setInterval 方法可以在指定的时间间隔（以毫秒为单位）重复执行一个函数。以下是一个简单的示例，实现一个元素从左到右的直线运动：

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SetInterval 运动示例</title>
  <style>
    #box {
      width: 50px;
      height: 50px;
      background-color: red;
      position: absolute;
      left: 0;
    }
  </style>
</head>
 
<body>
  <div id="box"></div>
  <script>
    const box = document.getElementById('box');
    let left = 0;
    const intervalId = setInterval(() => {
      left += 5;
      box.style.left = left + 'px';
      if (left >= 300) {
        clearInterval(intervalId);
      }
    }, 30);
  </script>
</body>
 
</html>

使用 requestAnimationFrame#

requestAnimationFrame 是浏览器提供的一个优化的动画 API，它会在浏览器下一次重绘之前调用指定的函数。与 setInterval 相比，它具有更好的性能和节能特性。以下是使用 requestAnimationFrame 实现相同运动的示例：

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>requestAnimationFrame 运动示例</title>
  <style>
    #box {
      width: 50px;
      height: 50px;
      background-color: red;
      position: absolute;
      left: 0;
    }
  </style>
</head>
 
<body>
  <div id="box"></div>
  <script>
    const box = document.getElementById('box');
    let left = 0;
    function animate() {
      left += 5;
      box.style.left = left + 'px';
      if (left < 300) {
        requestAnimationFrame(animate);
      }
    }
    requestAnimationFrame(animate);
  </script>
</body>
 
</html>

常见实践#

运动公式#

在时间版运动中，我们经常使用一些运动公式来计算元素的位置。常见的公式包括：

  • 匀速运动：position = start + speed * time
  • 加速运动：position = start + 0.5 * acceleration * time^2
  • 减速运动：position = start + speed * time - 0.5 * deceleration * time^2

缓动效果#

缓动效果可以使运动更加自然和流畅。我们可以通过一些数学函数来实现缓动效果。以下是一个简单的线性缓动函数示例：

function linearTween(t) {
  return t;
}

最佳实践#

性能优化#

  • 减少重绘和回流：尽量减少对元素样式的频繁修改，可以将多个样式修改合并为一次。
  • 使用 requestAnimationFrame：优先使用 requestAnimationFrame 而不是 setInterval，因为它会根据浏览器的刷新频率自动调整。

代码组织#

  • 封装运动函数：将运动逻辑封装为一个函数，方便复用和维护。
  • 使用面向对象：可以使用面向对象的方式来组织代码，提高代码的可读性和可维护性。

示例用法#

简单的直线运动#

function moveElement(element, target, duration) {
  const start = parseInt(element.style.left);
  const speed = (target - start) / (duration / 16.666);
  let currentTime = 0;
  function animate() {
    currentTime += 16.666;
    const position = start + speed * currentTime;
    element.style.left = position + 'px';
    if (currentTime < duration) {
      requestAnimationFrame(animate);
    }
  }
  requestAnimationFrame(animate);
}
 
const box = document.getElementById('box');
moveElement(box, 300, 1000);

带有缓动的运动#

function easeInOutQuad(t) {
  return t < 0.5? 2 * t * t : -1 + (4 - 2 * t) * t;
}
 
function moveElementWithEasing(element, target, duration) {
  const start = parseInt(element.style.left);
  let currentTime = 0;
  function animate() {
    currentTime += 16.666;
    const t = currentTime / duration;
    const position = start + (target - start) * easeInOutQuad(t);
    element.style.left = position + 'px';
    if (currentTime < duration) {
      requestAnimationFrame(animate);
    }
  }
  requestAnimationFrame(animate);
}
 
const box = document.getElementById('box');
moveElementWithEasing(box, 300, 1000);

参考#

2026-08