Overview

Element

Effect

Keyframe

Les keyframes définissent des valeurs de propriété spécifiques à des moments précis, avec une interpolation entre elles pour créer des animations fluides.

PropriétéTypeRequisExemplePlage de valeursDescription
idstringtrue--L'identifiant unique du keyframe.
timenumbertrue--Le moment auquel le keyframe se produit, en secondes (par rapport au temps de début de l'élément).
stateObjobjecttrue--L'objet d'état contenant les valeurs de propriété à ce keyframe. Peut inclure toute propriété animable comme x, y, rotation, scaleX, scaleY, alpha, etc.
cp1objectfalse--Le premier point de contrôle pour l'assouplissement de la courbe Bezier. Les coordonnées sont normalisées (plage 0-1). Exemple : {x: 0.25, y: 0.1}
cp2objectfalse--Le deuxième point de contrôle pour l'assouplissement de la courbe Bezier. Les coordonnées sont normalisées (plage 0-1). Exemple : {x: 0.25, y: 1}

Points de contrôle d'assouplissement Bezier

Les propriétés cp1 et cp2 définissent une courbe Bezier cubique pour un assouplissement personnalisé entre les keyframes :

  • Par défaut (linéaire) : Si omis, une interpolation linéaire est utilisée
  • Plage de coordonnées : Les valeurs x et y doivent être comprises entre 0 et 1
  • Définition de la courbe : Forme une courbe Bezier cubique de (0,0) à travers cp1 et cp2 jusqu'à (1,1)
  • Préréglages courants :
    • Ease-in-out : cp1: {x: 0.42, y: 0}, cp2: {x: 0.58, y: 1}
    • Ease-in : cp1: {x: 0.42, y: 0}, cp2: {x: 1, y: 1}
    • Ease-out : cp1: {x: 0, y: 0}, cp2: {x: 0.58, y: 1}
imageElement.json
{
  "id": "39ecb75a-3490-43bd-84c2-72366c2f39f2",
  "type": "Image",
  "start": 0,
  "duration": 5,
  "trackIndex": 0,
  "x": 0,
  "y": 0,
  "blendMode": "normal",
  "anchorX": 1302,
  "anchorY": 2312,
  "rotation": 0,
  "scaleX": 0.23356401384083045,
  "scaleY": 0.23356401384083045,
  "alpha": 1,
  "skewX": 0,
  "skewY": 0,
  "keyframes": [
      {
          "id": "800350bd-4a24-4440-904c-ec08a8159508",
          "time": 0,
          "stateObj": {
              "alpha": 0
          },
          "cp1": {
              "x": 0.25,
              "y": 0.1
          },
          "cp2": {
              "x": 0.25,
              "y": 1
          }
      },
      {
          "id": "ce3f9b10-2b9e-4266-8cdb-77167f9f16aa",
          "time": 3,
          "stateObj": {
              "alpha": 1
          },
          "cp1": {
              "x": 0.25,
              "y": 0
          },
          "cp2": {
              "x": 0.25,
              "y": 0.9
          }
      }
  ],
  "externalUrl": "https://images.pexels.com/photos/30465303/pexels-photo-30465303.jpeg",
  "ext": "jpeg"
}

Priorité d'animation

Lorsqu'un élément a plusieurs méthodes d'animation appliquées :

  1. Keyframes (définis dans le tableau keyframes) - animations de propriété standard
  2. Animations de nœud (dans le tableau animations) - animations avancées comme les expressions, les chemins, les séquences
  3. Animations procédurales - animations programmatiques

Si la même propriété est animée par plusieurs méthodes, l'ordre de priorité est :

  • Plus élevé : Animations de nœud (expression, procédural, chemin, séquence)
  • Moyen : Animations de keyframe
  • Plus bas : Valeurs de propriété statiques

Cela permet aux animations avancées de remplacer les valeurs des keyframes si nécessaire.

Remarques importantes

  • Référence temporelle : Les valeurs de time des keyframes sont relatives au temps de start de l'élément, pas au temps absolu de la timeline.
  • Multiples propriétés : Un seul keyframe peut animer plusieurs propriétés simultanément en les incluant dans stateObj.
  • Interpolation : Les propriétés entre les keyframes sont automatiquement interpolées. La courbe d'interpolation est définie par les points de contrôle Bezier cp1 et cp2.
  • Premier keyframe : Si le premier keyframe n'est pas à l'instant 0, l'élément interpolera de son état initial au premier keyframe.
  • Interpolation des couleurs : Les propriétés de couleur (comme fill, stroke) sont interpolées dans l'espace RGB.