语法
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);
规范
| 规范 |
|---|
| Web Animations> # dom-animation-animation> |