此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

Animation:Animation() 构造函数

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020年3月⁩.

Web 动画 API Animation() 构造函数用于创建并返回一个新的 Animation 对象实例。

语法

js
new Animation()
new Animation(effect)
new Animation(effect, timeline)

参数

effect 可选

要分配给动画的目标效果对象,基于 AnimationEffect 接口。虽然未来可能会支持诸如 SequenceEffectGroupEffect 等其他效果,但目前唯一可用的效果类型是 KeyframeEffect。该值可以为 null(默认值),表示不应用任何效果。

timeline 可选

指定与动画关联的 timeline,其类型基于 AnimationTimeline 接口。默认值是 Document.timeline,也可以将其设置为 null

示例

跟随白兔示例中,我们可以使用 Animation() 构造函数,结合文档的 timeline,为 rabbitDownKeyframes 创建一个 Animation

js
const whiteRabbit = document.getElementById("rabbit");

const rabbitDownKeyframes = new KeyframeEffect(
  whiteRabbit,
  [{ transform: "translateY(0%)" }, { transform: "translateY(100%)" }],
  { duration: 3000, fill: "forwards" },
);

const rabbitDownAnimation = new Animation(rabbitDownKeyframes);

规范

Specification
Web Animations
# dom-animation-animation

浏览器兼容性

参见