Element: animate() Methode

keyframes

Entweder ein Array von Keyframe-Objekten oder ein Keyframe-Objekt, dessen Eigenschaften Arrays von Werten zum Iterieren sind. Siehe Keyframe-Formate für weitere Details.

options

Entweder eine Ganzzahl, die die Dauer der Animation (in Millisekunden) angibt, oder ein Objekt, das eine oder mehrere Zeitsteuerungseigenschaften enthält, die im KeyframeEffect() options parameter beschrieben sind und/oder die folgenden Optionen:

id Optional

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

rangeEnd Optional

Gibt das Ende des Anbindungsbereichs einer Animation entlang ihrer Zeitleiste an, d.h. wo entlang der Zeitleiste eine Animation endet. Das JavaScript-Pendant zur CSS-Eigenschaft animation-range-end. rangeEnd kann mehrere unterschiedliche Wertetypen annehmen, wie folgt:

• Ein String, der normal sein kann (was bedeutet, dass keine Änderungen am Anbindungsbereich der Animation vorgenommen werden), eine CSS <length-percentage> darstellende Verschiebung, ein <timeline-range-name> oder ein <timeline-range-name> mit einem <length-percentage> dahinter. Zum Beispiel:

  "normal"
  "entry"
  "cover 100%"
  

  Weitere Informationen zu den verfügbaren Werten finden Sie unter animation-range. 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, die ein <timeline-range-name> und <length-percentage> darstellen, wie im vorherigen Punkt beschrieben. Zum Beispiel:

  js

  {
    rangeName: 'entry',
    offset: CSS.percent('100'),
  }
  

• Ein CSSNumericValue, das eine Verschiebung darstellt, zum Beispiel:

  js

  CSS.percent("100");
  

rangeStart Optional

Gibt den Beginn des Anbindungsbereichs einer Animation entlang ihrer Zeitleiste an, d.h., wo entlang der Zeitleiste eine Animation beginnt. Das JavaScript-Pendant zur CSS-Eigenschaft animation-range-start. rangeStart kann die gleichen Wertetypen wie rangeEnd annehmen.

timeline Optional

Eine für animate() einzigartige Eigenschaft: Die AnimationTimeline, die mit der Animation verknüpft wird. Standardmäßig ist dies Document.timeline. Das JavaScript-Pendant zur CSS-Eigenschaft animation-timeline.

Gibt eine Animation zurück.

In diesem Beispiel verwenden wir die animate() Methode, 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 (mit der Web Animation API) verwenden wir die praktische animate() Methode, um sofort eine Animation auf das #tunnel-Element zu erstellen und abzuspielen, damit es unendlich nach oben fließt. Beachten Sie das Array von Objekten, das als Keyframes und auch der Timing-Optionenblock übergeben wird.

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

In neueren Browserversionen können Sie nur einen Anfangs- oder Endzustand für eine Animation festlegen (d.h. ein einzelnes 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 so aus:

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

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

Eine 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-driven animations
• Web Animations API