本文深入探讨在 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 开始。
问题的根源在于，缓动函数中的 t 参数需要的是动画相对于其自身起始点的运行时间，而不是页面加载以来的总运行时间。
解决方案：管理动画起始时间
要解决这个问题，核心在于为每个动画实例记录其独立的起始时间。当动画开始时，我们应该捕获当前的 performance.now() 值作为该动画的 startTime。然后，在动画的每一帧中，我们计算当前时间与 startTime 之间的差值，这个差值就是动画的实际运行时间 animTime，它将作为缓动函数的 t 参数。
其计算公式如下：
animTime = performance.now() - startTime;
通过这种方式，无论动画何时启动，其 animTime 总是从 0 开始递增，直到达到动画的总持续时间 d。
实战示例：使用缓动函数创建动画
以下示例演示了如何在 JavaScript 中正确使用缓动函数来控制 Canvas 上的图形动画。我们将在用户点击 Canvas 时启动动画，并使用 requestAnimationFrame 来确保动画流畅。
JavaScript 缓动函数教程
点击 Canvas 区域以启动或重新启动动画。
在上述代码中：
- startTime 变量： 用于存储动画开始时的 performance.now() 值。每次点击 Canvas 启动新动画时，它都会被更新。
- animTime 计算： 在 mainLoop 函数中，animTime = currentTime - startTime; 确保了缓动函数接收到的 t 参数是动画从 0 开始计时的相对时间。
- 动画循环控制： if (animTime
关键注意事项
- requestAnimationFrame： 始终使用 requestAnimationFrame 来驱动 Web 动画。它能确保动画在浏览器渲染周期的最佳时机执行，避免卡顿，并节省电量。
- 动画状态管理： 使用一个布尔标志（如 animating）来跟踪动画是否正在运行，可以防止重复启动动画或在动画进行时重置状态。
- 多动画实例： 如果需要同时运行多个独立的动画，每个动画都需要有自己的 startTime 和 animating 状态变量，或者封装在一个动画管理器类中。
- 动画结束处理： 动画结束后，确保清除 startTime 或将动画状态重置，以便下次能够重新启动。同时，可能需要绘制动画的最终状态，以避免在清除 Canvas 后元素消失。
总结
正确使用 JavaScript 缓动函数的核心在于精确管理动画的起始时间。通过记录动画独立的 startTime，并计算出 animTime = currentTime - startTime 作为缓动函数的 t 参数，我们可以确保动画无论何时启动都能从预期位置平滑开始，避免跳跃。结合 requestAnimationFrame 的使用，这种方法能帮助我们构建高性能、视觉流畅且易于控制的 Web 动画。
