本文深入探讨在 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 来确保动画流畅。
JavaScript 缓动函数教程 canvas { border: 1px solid black; display: block; /* 避免 canvas 底部有空白 */ margin: 20px auto; /* 居中显示 */ } body { font-family: Arial, sans-serif; text-align: center; } p { margin-top: 10px; }点击 Canvas 区域以启动或重新启动动画。
// 缓动函数定义 (来自 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) { 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(); } } }
在上述代码中：
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 动画。
以上就是掌握 JavaScript 缓动函数：实现精确动画时序的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1533397.html
微信扫一扫 
支付宝扫一扫 
