Element: animate() Methode

keyframes

Entweder ein Array von Keyframe-Objekten oder ein Keyframe-Objekt, dessen Eigenschaften Arrays von Werten sind, über die iteriert werden soll. Siehe Keyframe Formats für weitere Details.

options

Entweder ein Integer, der die Dauer der Animation (in Millisekunden) darstellt, oder ein Objekt, das eine oder mehrere in den KeyframeEffect() options parameter beschriebene Timing-Eigenschaften und/oder die folgenden Optionen enthält:

id Optional

Eine für animate() einzigartige Eigenschaft: Ein String, mit dem die Animation referenziert wird.

rangeEnd Optional

Gibt das Ende eines Animationsanheftungsbereichs entlang seiner Zeitleiste an, d.h. wo entlang der Zeitleiste eine Animation enden wird. Das JavaScript-Äquivalent der CSS-Eigenschaft animation-range-end. rangeEnd kann verschiedene Wertetypen annehmen, wie folgt:

• Ein String, der normal sein kann (was keine Änderung des Animationsanheftungsbereichs bedeutet), ein CSS <length-percentage>, das einen Versatz darstellt, ein <timeline-range-name>, oder ein <timeline-range-name> mit einem <length-percentage> danach. Zum Beispiel: "normal", "entry", oder "cover 100%".

  Siehe animation-range für eine detaillierte Beschreibung der verfügbaren Werte. Werfen Sie auch einen Blick auf den View Timeline Ranges Visualizer, der genau zeigt, was die verschiedenen Werte in einem leicht verständlichen visuellen Format bedeuten.

• Ein Objekt, das rangeName (ein String) und offset (ein CSSNumericValue) Eigenschaften enthält und ein <timeline-range-name> und <length-percentage> repräsentiert, wie in der vorherigen Aufzählung beschrieben. Zum Beispiel: { rangeName: "entry", offset: CSS.percent("100") }.

• Ein CSSNumericValue, das einen Versatz darstellt, zum Beispiel: CSS.percent("100").

rangeStart Optional

Gibt den Anfang eines Animationsanheftungsbereichs entlang seiner Zeitleiste an, d.h. wo entlang der Zeitleiste eine Animation starten wird. Das JavaScript-Äquivalent der CSS-Eigenschaft animation-range-start. rangeStart kann dieselben Wertetypen wie rangeEnd annehmen.

timeline Optional

Eine für animate() einzigartige Eigenschaft: Die AnimationTimeline, die mit der Animation assoziiert werden soll. Voreinstellung ist Document.timeline. Das JavaScript-Äquivalent der CSS-Eigenschaft animation-timeline.

Gibt eine Animation zurück.

In diesem Beispiel verwenden wir die Methode animate(), um ein Element zu rotieren und zu skalieren.

HTML

<div class="newspaper">Spinning newspaper<br />causes dizziness</div>

CSS

html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}

.newspaper {
  padding: 0.5rem;
  text-transform: uppercase;
  text-align: center;
  background-color: white;
  cursor: pointer;
}

JavaScript

const newspaperSpinning = [
  { transform: "rotate(0) scale(1)" },
  { transform: "rotate(360deg) scale(0)" },
];

const newspaperTiming = {
  duration: 2000,
  iterations: 1,
};

const newspaper = document.querySelector(".newspaper");

newspaper.addEventListener("click", () => {
  newspaper.animate(newspaperSpinning, newspaperTiming);
});

Ergebnis

In der Demo Down the Rabbit Hole (with the Web Animation API) verwenden wir die praktische Methode animate(), um eine Animation auf dem #tunnel-Element zu erstellen und sofort abzuspielen, damit es unendlich nach oben fließt. Beachten Sie das Array von Objekten, die als Keyframes übergeben werden, sowie den Zeitoptionen-Block.

document.getElementById("tunnel").animate(
  [
    // keyframes
    { transform: "translateY(0px)" },
    { transform: "translateY(-300px)" },
  ],
  {
    // timing options
    duration: 1000,
    iterations: Infinity,
  },
);

In neueren Browserversionen können Sie einen Anfangs- oder Endzustand für eine Animation festlegen (d.h. einen einzelnen Keyframe), und der Browser wird das andere Ende der Animation ableiten, wenn er dazu in der Lage ist. Betrachten Sie zum Beispiel diese einfache Animation – das Keyframe-Objekt sieht folgendermaßen aus:

let rotate360 = [{ transform: "rotate(360deg)" }];

Wir haben nur den Endzustand der Animation spezifiziert, und der Anfangszustand wird impliziert.

Typische Verwendung der Eigenschaften timeline, rangeStart und rangeEnd könnte so aussehen:

const img = document.querySelector("img");

const timeline = new ViewTimeline({
  subject: img,
  axis: "block",
});

img.animate(
  {
    opacity: [0, 1],
    transform: ["scaleX(0)", "scaleX(1)"],
  },
  {
    fill: "both",
    duration: 1,
    timeline,
    rangeStart: "cover 0%",
    rangeEnd: "cover 100%",
  },
);

• Animation
• Element.getAnimations()
• animation-range-end, animation-range-start, animation-timeline
• CSS scroll-getriebene Animationen
• Web Animations API