KeyframeEffect: getKeyframes()-Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

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

Syntax

getKeyframes()

Parameter

Keine.

Rückgabewert

Gibt eine Sequenz von Objekten im folgenden Format zurück:

Eigenschaft-Wert-Paare: So viele Eigenschaft-Wert-Paare wie in jedem Keyframe der Animation enthalten sind.
offset: Der Offset des Keyframes, angegeben als Zahl zwischen 0.0 und 1.0 einschließlich oder null. Dies entspricht der Angabe von Start- und Endzuständen in Prozent in CSS-Stylesheets mit @keyframes. Dies ist null, wenn der Keyframe automatisch verteilt wird.
computedOffset: Der berechnete Offset für diesen Keyframe, berechnet, als die Liste der berechneten Keyframes erstellt wurde. Im Gegensatz zu offset oben ist computedOffset niemals null.
easing: Die Easing-Funktion, 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 spezifizierten Werte mit dem zugrunde liegenden Wert zu kombinieren. Dies wird fehlen, wenn die auf dem Effekt spezifizierte Composite-Operation verwendet wird.

Beispiele

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

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

<div>🤣</div>

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;
}

Spezifikationen

Specification
Web Animations # dom-keyframeeffect-getkeyframes

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Web Animations API
Methode von KeyframeEffect-Objekten.