Animation: Animation()-Konstruktor
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since März 2020.
Der Animation()-Konstruktor der Web Animations API gibt eine neue Animation-Objektinstanz zurück.
Syntax
new Animation()
new Animation(effect)
new Animation(effect, timeline)
Parameter
effectOptional-
Der Ziel-Effekt, als ein Objekt basierend auf der
AnimationEffect-Schnittstelle, das der Animation zugewiesen werden soll. Obwohl in Zukunft andere Effekte wieSequenceEffects oderGroupEffects möglich sein könnten, ist der einzige derzeit verfügbare EffektKeyframeEffect. Dies kannnullsein (was der Standardwert ist), um anzugeben, dass kein Effekt angewendet werden soll. timelineOptional-
Gibt die
timelinean, mit der die Animation assoziiert werden soll, als ein Objekt eines Typs basierend auf derAnimationTimeline-Schnittstelle. Der Standardwert istDocument.timeline, aber dies kann auch aufnullgesetzt werden.
Beispiele
Im Follow the White Rabbit-Beispiel können wir den Animation()-Konstruktor verwenden, um eine Animation für die rabbitDownKeyframes unter Verwendung der timeline des Dokuments zu erstellen:
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);
Spezifikationen
| Specification |
|---|
| Web Animations # dom-animation-animation |