本文深入探讨在 javascript 动画中使用缓动函数时，如何正确处理时间参数。核心问题在于动画起始时间的管理，而非简单使用全局时间戳。通过记录动画的起始时间并计算相对时间，结合 `requestanimationframe`，可以实现精确且可控的动画效果，避免动画跳跃或行为异常。
在 Web 开发中，缓动函数（Easing Functions）是实现流畅自然动画效果的关键。它们允许动画在开始、中间或结束时加速或减速，而非简单地线性变化。然而，正确使用缓动函数，特别是其时间参数 t，对于新手来说常常是一个挑战。许多开发者可能会误用全局时间戳，导致动画在非预期时间启动时出现跳跃或不连续的问题。
理解缓动函数的核心参数
在深入探讨解决方案之前，我们首先回顾一下标准缓动函数通常接受的四个核心参数：
- t (time)：当前时间。这通常是动画从开始到当前帧经过的时间。
- b (beginning value)：动画起始值。例如，如果一个元素从 x=0 开始移动，b 就是 0。
- c (change in value)：动画总的变化量。例如，如果一个元素从 0 移动到 100，c 就是 100。
- d (duration)：动画的总持续时间。
缓动函数会根据这四个参数计算出动画在当前时间点 t 应该达到的值。例如，一个简单的线性缓动函数可能是 c * t / d + b。
动画时序的常见误区
一个常见的错误是直接将 performance.now()（或类似的时间戳）作为缓动函数的 t 参数。performance.now() 返回的是自页面加载以来经过的毫秒数，这是一个全局的、不断增长的时间戳。如果动画在代码执行的早期启动，这可能看起来正常，因为 t 从一个相对较小的值开始。但如果动画在页面加载后一段时间才触发（例如，用户点击按钮后），此时 performance.now() 已经是一个较大的值，直接将其作为 t 传入会导致缓动函数立即计算出一个较大的结果，使动画“跳跃”到中间或结束状态，而不是从起始值 b 开始。
立即学习“Java免费学习笔记（深入）”；
问题的根源在于，缓动函数中的 t 参数需要的是动画相对于其自身起始点的运行时间，而不是页面加载以来的总运行时间。
解决方案：管理动画起始时间
要解决这个问题，核心在于为每个动画实例记录其独立的起始时间。当动画开始时，我们应该捕获当前的 performance.now() 值作为该动画的 startTime。然后，在动画的每一帧中，我们计算当前时间与 startTime 之间的差值，这个差值就是动画的实际运行时间 animTime，它将作为缓动函数的 t 参数。
其计算公式如下：
animTime = performance.now() - startTime;
通过这种方式，无论动画何时启动，其 animTime 总是从 0 开始递增，直到达到动画的总持续时间 d。
实战示例：使用缓动函数创建动画
以下示例演示了如何在 JavaScript 中正确使用缓动函数来控制 Canvas 上的图形动画。我们将在用户点击 Canvas 时启动动画，并使用 requestAnimationFrame 来确保动画流畅。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 缓动函数教程</title>
<style>
canvas {
border: 1px solid black;
display: block; /* 避免 canvas 底部有空白 */
margin: 20px auto; /* 居中显示 */
}
body {
font-family: Arial, sans-serif;
text-align: center;
}
p {
margin-top: 10px;
}
</style>
</head>
<body>
<p>点击 Canvas 区域以启动或重新启动动画。</p>
<canvas id="animationCanvas" width="500" height="200"></canvas>
<script>
// 缓动函数定义 (来自 https://spicyyoghurt.com/tools/easing-functions)
const easeLinear = (t, b, c, d) => c * t / d + b;
const easeInOutQuad = (t, b, c, d) => (t /= d * 0.5) < 1 ? c * 0.5 * t * t + b : -c * 0.5 * ((t - 1) * (t - 3) - 1) + b;
const canvas = document.getElementById("animationCanvas");
const ctx = canvas.getContext("2d");
let animating = false; // 标记动画是否正在进行
let startTime; // 动画的起始时间戳
const animDuration = 2000; // 动画总持续时间 (毫秒)
// 初始绘制，确保 Canvas 不为空
function drawInitialState() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(20, 20, 20, 0, Math.PI * 2); // 初始位置
ctx.fill();
}
drawInitialState(); // 页面加载时绘制一次
// 监听 Canvas 点击事件，启动动画
canvas.addEventListener("click", () => {
startTime = performance.now(); // 记录动画开始时间
if (!animating) { // 如果当前没有动画在运行，则启动动画循环
requestAnimationFrame(mainLoop);
animating = true; // 设置动画状态为正在进行
}
});
// 动画主循环
function mainLoop(currentTime) {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除上一帧
if (startTime !== undefined) { // 确保动画已启动
// 计算动画的相对运行时间
const animTime = currentTime - startTime;
// 使用缓动函数计算当前帧的 x 和 y 坐标
// x 轴：从 -20 (左侧外) 移动到 canvas.width + 20 (右侧外)，总变化量 canvas.width + 40
const x = easeLinear(animTime, -20, canvas.width + 40, animDuration);
// y 轴：从 20 移动到 canvas.height - 20，总变化量 canvas.height - 40
const y = easeInOutQuad(animTime, 20, canvas.height - 40, animDuration);
// 绘制圆形
ctx.beginPath();
ctx.arc(x, y, 20, 0, Math.PI * 2);
ctx.fill();
// 判断动画是否应该继续
if (animTime < animDuration) {
// 如果动画未结束，请求下一帧
requestAnimationFrame(mainLoop);
} else {
// 动画结束，重置状态
animating = false;
startTime = undefined; // 清除起始时间，以便下次点击重新开始
// 绘制最终状态，确保动画结束后停留在正确位置
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(
easeLinear(animDuration, -20, canvas.width + 40, animDuration),
easeInOutQuad(animDuration, 20, canvas.height - 40, animDuration),
20, 0, Math.PI * 2
);
ctx.fill();
}
}
}
</script>
</body>
</html>在上述代码中：
- startTime 变量： 用于存储动画开始时的 performance.now() 值。每次点击 Canvas 启动新动画时，它都会被更新。
- animTime 计算： 在 mainLoop 函数中，animTime = currentTime - startTime; 确保了缓动函数接收到的 t 参数是动画从 0 开始计时的相对时间。
- 动画循环控制： if (animTime < animDuration) 条件判断动画是否仍在进行。如果 animTime 超过 animDuration，则动画结束，animating 标志被重置，并且不再请求下一帧。
关键注意事项
- requestAnimationFrame： 始终使用 requestAnimationFrame 来驱动 Web 动画。它能确保动画在浏览器渲染周期的最佳时机执行，避免卡顿，并节省电量。
- 动画状态管理： 使用一个布尔标志（如 animating）来跟踪动画是否正在运行，可以防止重复启动动画或在动画进行时重置状态。
- 多动画实例： 如果需要同时运行多个独立的动画，每个动画都需要有自己的 startTime 和 animating 状态变量，或者封装在一个动画管理器类中。
- 动画结束处理： 动画结束后，确保清除 startTime 或将动画状态重置，以便下次能够重新启动。同时，可能需要绘制动画的最终状态，以避免在清除 Canvas 后元素消失。
总结
正确使用 JavaScript 缓动函数的核心在于精确管理动画的起始时间。通过记录动画独立的 startTime，并计算出 animTime = currentTime - startTime 作为缓动函数的 t 参数，我们可以确保动画无论何时启动都能从预期位置平滑开始，避免跳跃。结合 requestAnimationFrame 的使用，这种方法能帮助我们构建高性能、视觉流畅且易于控制的 Web 动画。
