如何通过JavaScript的Element.animate实现原生动画，以及它对比CSS动画的控制灵活性有哪些？-js教程-PHP中文网

Element.animate结合了CSS动画的性能优势与JavaScript的灵活控制，适合需要交互和动态调整的复杂动画场景。

如何通过javascript的element.animate实现原生动画，以及它对比css动画的控制灵活性有哪些？

Element.animate

登录后复制

提供了一种非常强大的方式，让我们能用 JavaScript 直接控制动画，它本质上是 Web Animations API 的核心，将 CSS 动画的声明式优势与 JavaScript 的命令式控制能力巧妙地结合了起来。说实话，它给我的感觉就像是，你既能享受浏览器底层优化的性能红利，又能像操作普通 JavaScript 对象一样，随心所欲地控制动画的播放、暂停、反转，甚至在时间轴上“拖拽”动画进度。相较于纯 CSS 动画，它的控制灵活性简直是质的飞跃，尤其是在处理那些需要与用户交互、动态生成或复杂序列的动画时，这种优势体现得淋漓尽致。

解决方案

要使用

Element.animate

登录后复制

，核心就是调用元素上的

animate()

登录后复制

方法。这个方法接受两个参数：

keyframes

登录后复制

和

options

登录后复制

。

keyframes

登录后复制

定义了动画的关键帧，你可以把它想象成动画在不同时间点应该呈现的状态。它既可以是一个数组，每个元素是一个表示帧状态的对象，也可以是一个包含所有属性的对象，浏览器会根据属性值数组自动生成帧。

// 示例1: 数组形式的关键帧
const element = document.getElementById('myElement');
element.animate(
  [
    { transform: 'translateX(0)', opacity: 1 }, // 0% 状态
    { transform: 'translateX(100px)', opacity: 0.5 }, // 50% 状态
    { transform: 'translateX(200px)', opacity: 1 } // 100% 状态
  ],
  {
    duration: 1000, // 动画持续时间1秒
    easing: 'ease-in-out', // 缓动函数
    fill: 'forwards', // 动画结束后保持最终状态
    iterations: Infinity // 无限循环
  }
);

// 示例2: 对象形式的关键帧 (更适合简单的 from/to 动画或多个属性)
element.animate(
  {
    transform: ['scale(1)', 'scale(1.2)', 'scale(1)'], // 从1到1.2再到1
    backgroundColor: ['red', 'blue', 'red']
  },
  {
    duration: 1500,
    easing: 'linear',
    iterations: 2 // 播放两次
  }
);

登录后复制

options

登录后复制

是一个对象，用于配置动画的各种行为，比如持续时间 (

duration

登录后复制

)、缓动函数 (

easing

登录后复制

)、延迟 (

delay

登录后复制

)、填充模式 (

fill

登录后复制

)、循环次数 (

iterations

登录后复制

) 等。这些参数与 CSS

@keyframes

登录后复制

规则中的属性非常相似，但在这里它们被封装成了一个 JavaScript 对象，方便我们动态调整。

立即学习“Java免费学习笔记（深入）”；

animate()

登录后复制

方法会返回一个

Animation

登录后复制

对象，这才是真正赋予我们强大控制力的关键。通过这个对象，你可以：

```
play()
```
登录后复制
: 播放动画。
```
pause()
```
登录后复制
: 暂停动画。
```
reverse()
```
登录后复制
: 反转动画播放方向。
```
finish()
```
登录后复制
: 立即跳到动画结束状态。
```
cancel()
```
登录后复制
: 立即停止动画并移除所有动画效果，回到初始状态。
```
commitStyles()
```
登录后复制
: 将动画的最终状态应用为元素的实际样式，这在
```
fill: 'forwards'
```
登录后复制
的情况下尤其有用，它能确保动画结束后样式真正“固定”下来。
监听事件：
```
animation.onfinish
```
登录后复制
或
```
animation.oncancel
```
登录后复制
可以让你在动画完成或取消时执行回调函数。

const myAnimation = element.animate(
  [{ opacity: 0 }, { opacity: 1 }],
  { duration: 500 }
);

// 动画播放完成后执行
myAnimation.onfinish = () => {
  console.log('动画播放完毕！');
  // 此时可以执行一些后续操作，比如移除元素或触发下一个动画
  myAnimation.commitStyles(); // 将最终样式应用到元素上
  myAnimation.cancel(); // 确保动画对象不再活跃，但样式已固定
};

// 按钮点击暂停
document.getElementById('pauseButton').addEventListener('click', () => {
  myAnimation.pause();
});

// 按钮点击反转
document.getElementById('reverseButton').addEventListener('click', () => {
  myAnimation.reverse();
});

登录后复制

这种基于

Animation

登录后复制

对象的控制，让我觉得它比纯粹的 CSS 动画更像是一个“活”的实体，你可以随时与它互动，而不是仅仅声明一次就放任自流。

Element.animate与CSS动画：何时选择何者以优化性能和开发效率？

选择

Element.animate

登录后复制

还是 CSS 动画，这其实是个挺有意思的问题，没有绝对的答案，更多的是看你的具体场景和需求。我个人在做决策时，通常会从几个维度去考量。

首先，对于那些简单的、声明式的、不需要太多交互的 UI 动画，比如按钮的

:hover

登录后复制

效果、模态框的进出场、加载指示器等等，我几乎总是倾向于使用纯 CSS 动画。原因很简单，CSS 动画通常能被浏览器优化得非常好，它们可以运行在独立的合成器线程上，这意味着即使主线程被 JavaScript 任务阻塞，动画也能保持流畅。这对于提升用户体验至关重要，特别是那些“消防即忘”的动画，写起来也快，维护起来也清晰。

然而，一旦动画需求变得复杂，需要动态计算、用户交互驱动、或者涉及多个动画的编排和同步时，CSS 动画的局限性就显现出来了。比如，一个拖拽手势驱动的元素移动，或者一个根据用户滚动位置改变速度和方向的视差效果，再或者一个需要精确暂停、快进、倒退的自定义播放器进度条动画，这些场景下，

Element.animate

登录后复制

就成了我的首选。

Element.animate

登录后复制

的优势在于它提供了 JavaScript 的编程能力。你可以动态地修改动画的持续时间、缓动函数、关键帧，甚至在动画播放过程中改变其

playbackRate

登录后复制

或

currentTime

登录后复制

。这种细粒度的控制是 CSS 动画难以企及的。想象一下，你想做一个动画，它根据用户的输入速度来调整播放速度，或者在某个特定事件发生时，立即跳到动画的某个百分比，这些在

Element.animate

登录后复制

里实现起来简直是如鱼得水，而用 CSS 动画则会非常痛苦，甚至无法实现。

性能方面，虽然很多人觉得 JS 动画不如 CSS 动画，但

Element.animate

登录后复制

实际上是 Web Animations API 的一部分，它在设计之初就考虑到了性能。对于许多可合成的属性（如

transform

登录后复制

和

opacity

登录后复制

），浏览器同样可以将其优化到合成器线程上运行，与 CSS 动画享有类似的性能优势。所以，并非所有 JS 动画都慢，关键在于你动画的属性以及浏览器的实现。

总结一下，如果动画是静态的、简单的、无交互的，并且性能是首要考虑，那就用 CSS 动画。如果动画是动态的、复杂的、需要精细控制和交互的，那么

Element.animate

登录后复制

绝对是更高效、更灵活的选择。它提供了一个完美的平衡点，既能利用浏览器底层的优化，又能享受 JavaScript 带来的强大控制力。

如何利用Element.animate的Animation对象实现动画的精细化控制与交互？

Element.animate

登录后复制

返回的

Animation

登录后复制

对象，我把它看作是动画的“遥控器”，它上面挂载了一系列属性和方法，让我们能对动画进行前所未有的精细化控制。这正是

Element.animate

登录后复制

区别于 CSS 动画，并使其在交互式动画中大放异彩的关键。

标书对比王

标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

查看详情

最直观的控制当然是

play()

登录后复制

、

pause()

登录后复制

、

reverse()

登录后复制

这些方法。但真正深入的控制，需要关注

currentTime

登录后复制

和

playbackRate

登录后复制

这两个属性。

currentTime

登录后复制

属性允许你获取或设置动画当前的时间位置（以毫秒为单位）。这意味着你可以像操作视频播放器一样，精确地将动画“拖拽”到任何时间点。这在实现动画的“scrubbing”（擦洗，即通过拖动滑块来控制动画进度）功能时非常有用。

const animation = element.animate(
  [{ transform: 'translateX(0px)' }, { transform: 'translateX(200px)' }],
  { duration: 2000, fill: 'forwards' }
);
animation.pause(); // 先暂停，等待用户控制

const slider = document.getElementById('animationSlider');
slider.max = animation.duration; // 滑块最大值设为动画时长

slider.addEventListener('input', (event) => {
  animation.currentTime = event.target.value; // 根据滑块值设置动画当前时间
});

// 你甚至可以根据用户滚动事件来改变 currentTime，实现滚动视差动画
window.addEventListener('scroll', () => {
  const scrollProgress = window.scrollY / (document.body.scrollHeight - window.innerHeight);
  animation.currentTime = animation.duration * scrollProgress;
});

登录后复制

通过

currentTime

登录后复制

，你可以将动画的播放进度与任何外部事件（如鼠标拖动、滚动条位置、音频播放进度）关联起来，创造出非常丰富的交互体验。

另一个强大的属性是

playbackRate

登录后复制

，它控制着动画的播放速度。默认值是

登录后复制

，表示正常速度。设置为

登录后复制

会让动画快进一倍，设置为

0.5

登录后复制

则会慢放一倍。设置为负值（例如

-1

登录后复制

）则会以正常速度反向播放。这对于实现一些动态效果非常有用，比如根据用户操作的紧急程度来加速或减速动画。

// 鼠标进入元素时加速动画，移出时恢复正常
element.addEventListener('mouseenter', () => {
  animation.playbackRate = 2; // 加速
  animation.play(); // 确保正在播放
});

element.addEventListener('mouseleave', () => {
  animation.playbackRate = 1; // 恢复正常速度
});

登录后复制

除了这些，

Animation

登录后复制

对象还提供了几个 Promise 属性，用于处理动画的生命周期：

```
animation.ready
```
登录后复制
: 这是一个 Promise，当动画准备好播放时（即动画的
```
delay
```
登录后复制
结束，或者动画从暂停状态恢复时），它会解析。这对于确保动画在特定时机开始执行后续操作很有用。
```
animation.finished
```
登录后复制
: 这是一个 Promise，当动画完成播放时（包括
```
fill: 'forwards'
```
登录后复制
状态），它会解析。它比
```
onfinish
```
登录后复制
事件更适合链式调用和异步处理。

animation.finished.then(() => {
  console.log('动画已经完全结束并固定了最终状态。');
  // 可以在这里触发下一个动画，或者执行一些清理工作
}).catch(() => {
  console.log('动画被取消了。');
});

登录后复制

这些属性和方法共同构成了

Animation

登录后复制

对象的强大能力，让开发者能够以编程的方式，对动画进行极致的精细化控制，从而创造出高度动态和交互式的 Web 体验。

Element.animate在复杂场景下的挑战与兼容性考量：你可能遇到的坑点？

尽管

Element.animate

登录后复制

功能强大，但在实际项目，尤其是在复杂场景下，它并非没有挑战和一些需要注意的坑点。我自己在实践中就遇到过一些，这里总结一下，希望能给大家一些前车之鉴。

首先，浏览器兼容性是老生常谈的问题。虽然现代浏览器对 Web Animations API 的支持已经相当不错，但如果你需要支持一些老旧的浏览器（比如 IE 或者某些版本的 Safari），那么

Element.animate

登录后复制

可能需要一个 Polyfill。

web-animations-js

登录后复制

就是一个非常流行的 Polyfill 库，它可以让 Web Animations API 在不支持的浏览器中也能正常工作。不过，引入 Polyfill 意味着增加了文件大小和潜在的性能开销，所以在项目初期就需要评估目标用户群体的浏览器分布。

// 如果需要兼容性，可能需要引入 polyfill
// import 'web-animations-js'; // 或通过 CDN 引入

登录后复制

其次，关于

fill

登录后复制

模式和
commitStyles()
登录后复制
。

fill: 'forwards'

登录后复制

是一个非常方便的选项，它让动画结束后元素保持最终状态。但这里有个小陷阱：

fill: 'forwards'

登录后复制

只是让元素看起来停留在最终状态，它并没有真正改变元素的内联样式或计算样式。这意味着，如果你在动画结束后尝试获取元素的样式，或者在后续的 CSS 规则中覆盖了动画的最终状态，可能会出现意想不到的结果。

commitStyles()

登录后复制

方法就是用来解决这个问题的，它会将动画的最终状态作为元素的实际样式应用上去。我个人建议，如果你希望动画结束后状态是持久的，并且不希望它被轻易覆盖，那么在

onfinish

登录后复制

回调中调用

commitStyles()

登录后复制

是一个好习惯。

const anim = element.animate(
  [{ transform: 'translateX(0)' }, { transform: 'translateX(100px)' }],
  { duration: 1000, fill: 'forwards' }
);

anim.onfinish = () => {
  anim.commitStyles(); // 确保 translateX(100px) 成为元素的实际样式
  anim.cancel(); // 此时动画对象可以安全地被取消，因为样式已固定
};

登录后复制

再来是 性能考量，虽然我前面提到