Overview

Element

Effect

Keyframe

Los fotogramas clave definen valores de propiedad específicos en momentos específicos, con interpolación entre ellos para crear animaciones suaves.

PropTipoRequeridoEjemploRango de ValoresDescripción
idstringtrue--El identificador único del fotograma clave.
timenumbertrue--El tiempo en el que ocurre el fotograma clave, en segundos (relativo al tiempo de inicio del elemento).
stateObjobjecttrue--El objeto de estado que contiene los valores de propiedad en este fotograma clave. Puede incluir cualquier propiedad animable como x, y, rotación, scaleX, scaleY, alfa, etc.
cp1objectfalse--El primer punto de control para el easing de la curva Bezier. Las coordenadas están normalizadas (rango 0-1). Ejemplo: {x: 0.25, y: 0.1}
cp2objectfalse--El segundo punto de control para el easing de la curva Bezier. Las coordenadas están normalizadas (rango 0-1). Ejemplo: {x: 0.25, y: 1}

Puntos de Control de Easing Bezier

Las propiedades cp1 y cp2 definen una curva Bezier cúbica para el easing personalizado entre fotogramas clave:

  • Por defecto (lineal): Si se omite, se utiliza la interpolación lineal
  • Rango de coordenadas: Tanto los valores x como y deben estar entre 0 y 1
  • Definición de la curva: Forma una Bezier cúbica desde (0,0) a través de cp1 y cp2 hasta (1,1)
  • Preajustes comunes:
    • 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"
}

Prioridad de Animación

Cuando un elemento tiene múltiples métodos de animación aplicados:

  1. Fotogramas Clave (definidos en el array keyframes) - animaciones de propiedades estándar
  2. Animaciones de Nodo (en el array animations) - animaciones avanzadas como expresiones, caminos, secuencias
  3. Animaciones Procedurales - animaciones programáticas

Si la misma propiedad es animada por múltiples métodos, el orden de prioridad es:

  • Más Alto: Animaciones de nodo (expresión, procedimental, camino, secuencia)
  • Medio: Animaciones de fotogramas clave
  • Más Bajo: Valores de propiedad estáticos

Esto permite que las animaciones avanzadas anulen los valores de los fotogramas clave cuando sea necesario.

Notas Importantes

  • Referencia de Tiempo: Los valores de time de los fotogramas clave son relativos al tiempo de start del elemento, no al tiempo absoluto de la línea de tiempo.
  • Múltiples Propiedades: Un solo fotograma clave puede animar múltiples propiedades simultáneamente al incluirlas en stateObj.
  • Interpolación: Las propiedades entre fotogramas clave se interpolan automáticamente. La curva de interpolación está definida por los puntos de control Bezier cp1 y cp2.
  • Primer Fotograma Clave: Si el primer fotograma clave no está en el tiempo 0, el elemento interpolará desde su estado inicial hasta el primer fotograma clave.
  • Interpolación de Color: Las propiedades de color (como fill, stroke) se interpolan en el espacio RGB.