掌握 JavaScript 缓动函数：实现精确动画时序-js教程-PHP中文网

掌握 JavaScript 缓动函数：实现精确动画时序

花韻仙語

发布： 2025-10-29 11:01:02

原创

237人浏览过

掌握 JavaScript 缓动函数：实现精确动画时序

本文深入探讨在 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 参数。

其计算公式如下：

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

查看详情

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 动画。

以上就是掌握 JavaScript 缓动函数：实现精确动画时序的详细内容，更多请关注php中文网其它相关文章！