KeyframeEffect : la mthode getKeyframes()

Syntaxe

getKeyframes()

Paramtres

Aucun.

Valeur de retour

Renvoie une squence d'objets avec le format suivant :

paires proprit/valeur

Autant de paires proprit/valeur que contient chaque image cl de l'animation.

offset

Le dcalage de l'image cl, spcifi comme un nombre entre 0.0 et 1.0 inclus ou null. Cela quivaut indiquer des tats de dbut et de fin en pourcentages dans les feuilles de style CSS avec @keyframes. Cette valeur vaudra null si l'image cl est espace automatiquement.

computedOffset

Le dcalage calcul pour cette image cl, dtermin lorsque la liste des images cls calcules a t produite. Contrairement offset, ci-dessus, computedOffset n'est jamais null.

easing

La fonction d'attnuation utilise de cette image cl jusqu' la suivante de la srie.

composite

L'opration KeyframeEffect.composite utilise pour combiner les valeurs spcifies dans cette image cl avec la valeur sous-jacente. Cette proprit sera absente si l'opration de composition spcifie sur l'effet est utilise.

Exemples

Dans l'exemple suivant, nous inspectons l'animation  rolling  pour voir ses images cls avec la mthode getKeyframes() :

const emoji = document.querySelector("div"); // lment  animer

const rollingKeyframes = new KeyframeEffect(
  emoji,
  [
    { transform: "translateX(0) rotate(0)" }, // image-cl
    { transform: "translateX(200px) rotate(1.3turn)" }, // image-cl
  ],
  {
    // options des images-cls
    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;
}

Spcifications

Compatibilit des navigateurs

Voir aussi

• L'API Web Animations
• Mthode des objets KeyframeEffect