KeyframeEffect: getKeyframes() Methode

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2020 browserübergreifend verfügbar.

Die getKeyframes() Methode eines KeyframeEffect gibt ein Array der berechneten Keyframes zurück, die diese Animation zusammen mit ihren berechneten Offsets bilden.

In diesem Artikel

Syntax

getKeyframes()

Rückgabewert

Gibt eine Sequenz von Objekten mit folgendem Format zurück:

Eigenschaft-Wert-Paare

So viele Eigenschaft-Wert-Paare, wie in jedem Keyframe der Animation enthalten sind.

offset

Der Offset des Keyframes, spezifiziert als eine Zahl zwischen 0.0 und 1.0 einschließlich oder null. Dies entspricht dem Festlegen von Start- und Endzuständen in Prozent in CSS-Stylesheets mittels @keyframes. Dies ist null, wenn das Keyframe automatisch verteilt ist.

computedOffset

Der berechnete Offset für dieses Keyframe, berechnet, als die Liste der berechneten Keyframes erstellt wurde. Im Gegensatz zu offset oben ist der computedOffset niemals null.

easing

Die easing function, die von diesem Keyframe bis zum nächsten Keyframe in der Serie verwendet wird.

composite

Die KeyframeEffect.composite Operation, die verwendet wird, um die in diesem Keyframe angegebenen Werte mit dem zugrunde liegenden Wert zu kombinieren. Dies wird fehlen, wenn die auf dem Effekt angegebene Composite-Operation verwendet wird.

Beispiele

Im folgenden Beispiel können wir die Rollanimation inspizieren, um ihre Keyframes mit der getKeyframes() Methode zu sehen:

js
const emoji = document.querySelector("div"); // element to animate

const rollingKeyframes = new KeyframeEffect(
  emoji,
  [
    { transform: "translateX(0) rotate(0)" }, // keyframe
    { transform: "translateX(200px) rotate(1.3turn)" }, // keyframe
  ],
  {
    // keyframe options
    duration: 2000,
    direction: "alternate",
    easing: "ease-in-out",
    iterations: "Infinity",
  },
);

const rollingAnimation = new Animation(rollingKeyframes, document.timeline);
rollingAnimation.play();

// Array [ {…}, {…} ]
console.log(rollingAnimation.effect.getKeyframes());

html

body {
  box-shadow: 0 5px 5px pink;
}

div {
  width: fit-content;
  margin-left: calc(50% - 132px);
  font-size: 64px;
  user-select: none;
  margin-top: 1rem;
}

Web Animations API
Methode der KeyframeEffect Objekte.

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Web Animations API
KeyframeEffect
Konstruktor
1. KeyframeEffect()
Instanzeigenschaften
Instanzmethoden
1. getKeyframes()
2. setKeyframes()
Vererbung
1. AnimationEffect
Verwandte Seiten für Web Animations
Anleitungen
1. Verwendung der Web Animations API
2. Konzepte der Web Animations API
3. Keyframe-Formate
4. Web Animation API Tipps und Tricks

KeyframeEffect: getKeyframes() Methode

In diesem Artikel

Syntax

Parameter

Rückgabewert

Beispiele

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN