原生 JavaScript animate() API 详解与实战示例

理解 animate() 的核心机制

element.animate() 是 HTML5 标准的一部分，所有 DOM 元素均可调用。该方法接受两个主要参数：

• 关键帧数据（Keyframes）：可以是单个 CSS 样式对象，也可以是包含多个对象的数组（用于定义动画的不同阶段）。
• 动画选项（Timing Options）：一个配置对象，用于控制动画的速度、时长和循环方式。

虽然该方法没有直接的回调函数参数，但生成的 AnimationTimeline 对象支持事件监听，可用于捕捉动画结束状态。

常用动画参数详解

在第二个参数中，以下是控制动画行为的关键属性：

• duration：动画总时长，单位为毫秒（ms）。例如 1000 表示 1 秒。
• easing：定义动画的运动速率曲线。
  • ease（默认）：慢速开始，加速，然后减速停止。
  • linear：全程匀速运动。
  • ease-in：慢速开始，之后加速。
  • ease-out：快速开始，之后减速。
  • ease-in-out：慢速开始，中间加速，最后减速。
• iterations：循环次数。设置为数字代表重复几次，设置为 'Infinity' 则无限循环。
• fill：控制动画结束后的样式状态。
  • none（默认）：动画结束后，元素恢复到原始样式。
  • forwards：动画结束后，保留最后一帧的状态。
• delay：延迟启动时间（毫秒）。

实战一：基础过渡动画

当第一个参数仅传递一个 CSS 对象时，animate() 会平滑地过渡到目标样式。以下示例演示了一个红色圆形在原地旋转的效果。

<div id="box" style="width: 200px;height: 200px;background: red;border-radius:50% 50% 0 0;"></div>

<script>
var box = document.getElementById("box");

box.animate(
    { // 目标样式
        transform: 'rotate(360deg)'
    },
    { 
        duration: 1000,       // 耗时 1000 毫秒
        easing: 'linear',     // 匀速播放
        iterations: Infinity  // 无限循环
    }
); 
</script>

要点分析

此例通过 transform: rotate(360deg) 触发连续旋转。由于设置了 iterations: Infinity 且未指定方向变化，浏览器会自动处理回退逻辑以维持循环。若需停止动画，可调用返回的 Animation 对象上的 cancel() 或 pause() 方法。

实战二：关键帧序列动画

通过传入关键帧数组，我们可以精确控制动画过程中的每一个中间状态。此例演示了小方块同时发生位移和透明度变化的复合动画。

<style type="text/css">
#box{
    width: 200px;
    height: 200px;
    background: red;
    position: absolute;
    border-radius: 50% 50% 0 0;
}
</style>
<div id="box"></div>
<script>
var box = document.getElementById("box");

box.animate(
    [  // 关键帧序列
        { transform: 'translate3d(0px, 0px, 0)', opacity: '1' },          // 第 1 帧：起点
        { transform: 'translate3d(50px, 0px, 0)', opacity: '0.8' },      // 第 2 帧：中途点
        { transform: 'translate3d(150px, 100px, 0)', opacity: '0.5' }    // 第 3 帧：终点
    ],
    { 
        duration: 1000,   // 总时长
        iterations: 1,    // 仅执行一次
        fill: 'forwards', // 结束后保持最后的状态（不回到原位）
        delay: 0,
        easing: 'linear'  // 匀速执行
    }
);
</script> 

关键点说明

• 顺序映射：数组中的对象按时间轴顺序映射。如果定义了 3 个对象，它们将分别对应时间的 0%、50% 和 100% 处（除非使用 offset 属性指定具体位置）。
• 样式覆盖：关键帧内的样式会覆盖元素的初始内联样式或 CSS 样式。
• 性能优化：尽可能使用 transform 和 opacity 进行动画，因为它们是少数不会触发重排（Reflow）的属性，能显著提升动画流畅度。

注意事项与兼容性

element.animate() 在现代浏览器中已得到广泛支持，但在某些旧版 Edge 或 Safari 版本中可能需要添加前缀或使用 polyfill。此外，需要注意的是，通过 JS 设置的样式具有较高优先级，可能会覆盖部分 CSS :hover 或 @keyframes 规则，在实际混用时需谨慎管理样式层叠。

以上就是 JavaScript animate() 方法的详细内容，更多关于 JavaScript 高级动画技巧的资料请关注本站其它相关文章！