KeyframeEffect : méthode getKeyframes()

Syntaxe

getKeyframes()

Paramètres

Aucun.

Valeur de retour

Retourne une séquence d'objets avec le format suivant :

paires propriété/valeur

Autant de paires propriété/valeur que contient chaque image clé de l'animation.

offset

Le décalage de l'image clé, défini comme un nombre entre 0.0 et 1.0 inclus ou null. Cela équivaut à indiquer des états de début et de fin en pourcentages dans les feuilles de style CSS avec @keyframes. Cette valeur vaut null si l'image clé est espacée automatiquement.

computedOffset

Le décalage calculé pour cette image clé, déterminé lorsque la liste des images clés calculées a été produite. Contrairement à offset, ci-dessus, computedOffset n'est jamais null.

easing

La fonction d'atténuation utilisée de cette image clé jusqu'à la suivante de la série.

composite

L'opération KeyframeEffect.composite utilisée pour combiner les valeurs définies dans cette image clé avec la valeur sous-jacente. Cette propriété est absente si l'opération de composition définie sur l'effet est utilisée.

Exemples

Dans l'exemple suivant, nous inspectons l'animation « rolling » pour voir ses images clés avec la méthode getKeyframes() :

const emoji = document.querySelector("div"); // élément à animer

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

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

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

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

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'API Web Animations
• Méthode des objets KeyframeEffect