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

effect Optional

Der Ziel-Effekt, als ein Objekt basierend auf der AnimationEffect-Schnittstelle, das der Animation zugewiesen werden soll. Obwohl in Zukunft andere Effekte wie SequenceEffects oder GroupEffects möglich sein könnten, ist der einzige derzeit verfügbare Effekt KeyframeEffect. Dies kann null sein (was der Standardwert ist), um anzugeben, dass kein Effekt angewendet werden soll.

timeline Optional

Gibt die timeline an, mit der die Animation assoziiert werden soll, als ein Objekt eines Typs basierend auf der AnimationTimeline-Schnittstelle. Der Standardwert ist Document.timeline, aber dies kann auch auf null gesetzt 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

Browser-Kompatibilität

Siehe auch

• Web Animations API
• Animation