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接口。虽然未来可能会支持诸如SequenceEffect或GroupEffect等其他效果,但目前唯一可用的效果类型是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> |