JavaScript DOM animate() 方法详解：参数与关键帧动画实战
本文介绍JavaScript中DOM元素的animate()方法，这是一种用于创建过渡动画和关键帧动画的API。文章详细解析了animate()的两个核心参数：关键帧（数组或对象）及动画属性设置对象。重点讲解duration、iterations、fill、delay和easing等具体参数的用法，并通过两个代码案例演示了对象式过渡动画与数组式关键帧动画的实际应用。
JavaScript animate() 方法概述
animate() 是一个相对冷门的方法，以至于在常规搜索引擎和官方手册中往往难以找到详尽的相关资料。不过，通过一个简单的演示案例，我们仍然可以挖掘出该方法的一些基本属性。
animate() 是所有 DOM 元素都具备的方法，主要用于制作过渡动画和关键帧动画。使用该方法可以让开发者更便捷地实现动态效果。
animate() 参数详解
animate() 方法主要接受两个参数（遗憾的是，目前似乎不支持直接传入回调函数，且尚未发现相关实现方式）。
第一个参数是关键帧，它可以是数组或对象。如果传入数组，数组内部包裹的必须是对象。对象中的属性即为对应的 CSS 属性和值。
第二个参数用于设置动画的具体属性，可以传入数字或对象。
目前发现的可用属性包括以下几项：
- duration：动画持续时间，单位为毫秒。
- iterations：重复次数，默认为 1，类型为数字。若需无限循环，可设置为 'Infinity'（非必须）。
- fill：定义动画结束后的状态。不复位设置为 'forwards'，复位为默认值 'none'（非必须）。
- delay：设置动画开始前的延迟时长，单位为毫秒（非必须）。
- easing：设置动画的运动速率曲线。可选值包括 'ease'（默认，慢-快-慢）、'linear'（匀速）、'ease-in'（慢-匀速）以及 'ease-in-out'（慢-匀速-慢）（非必须）。
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, // 动画时长 (单位毫秒)
easing:'linear', // 平滑
iterations: Infinity, // 重复次数 （无限循环：Infinity）
},
);
</script>
第二个小盒子的移动示例中，第一个参数是一个数字，数组包裹着多个对象，每个对象代表一个关键帧，格式为 [{}, {}]。
<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>
box.animate(
[ //关键帧（数组包裹对象）
{transform:'translate3d(0px, 0px, 0)',opacity:'1'}, // 第一帧
{transform:'translate3d(50px, 0px, 0)',opacity:'.8'}, // 第二帧
{transform:'translate3d(150px, 100px, 0)',opacity:'.5'}, // 第三帧
],
{
duration: 1000, // 动画时长 (单位毫秒)
iterations: 1, // 重复次数 （无限循环：Infinity）
fill:'forwards', //结束时不复位
delay:0, // 设置动画延迟时长 (单位毫秒)
easing:'linear' //设置动画 运动速率 (linear: 匀速)
},
);
</script> 到此这篇关于 JavaScript 中动画制作方法 animate() 属性的文章就介绍到这了，更多相关 JavaScript animate() 属性内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！
JavaScript零基础入门：从环境搭建到运行第一段代码
2026-11-05 15:29:58
HTML链接中javascript：void(0)的作用及现代替代方案
2026-11-05 10:07:47
在线调试 JS 时怎么引入 jQuery 或 Vue 等第三方库
2026-11-05 08:53:56
原生JavaScript实现简易颜色选择器原理与代码
2026-11-03 23:22:19
JS原生表单序列化：FormData与URLSearchParams用法详解
2026-11-03 23:13:21