Overview

Element

Effect

Keyframe

Os keyframes definem valores específicos de propriedades em momentos específicos, com interpolação entre eles para criar animações suaves.

PropriedadeTipoNecessárioExemploFaixa de ValoresDescrição
idstringtrue--O identificador único do keyframe.
timenumbertrue--O tempo em que o keyframe ocorre, em segundos (relativo ao tempo de início do elemento).
stateObjobjecttrue--O objeto de estado contendo valores de propriedades neste keyframe. Pode incluir qualquer propriedade animável como x, y, rotação, scaleX, scaleY, alpha, etc.
cp1objectfalse--O primeiro ponto de controle para easing da curva Bezier. As coordenadas são normalizadas (intervalo 0-1). Exemplo: {x: 0.25, y: 0.1}
cp2objectfalse--O segundo ponto de controle para easing da curva Bezier. As coordenadas são normalizadas (intervalo 0-1). Exemplo: {x: 0.25, y: 1}

Pontos de Controle de Easing Bezier

As propriedades cp1 e cp2 definem uma curva Bezier cúbica para easing personalizado entre keyframes:

  • Padrão (linear): Se omitido, a interpolação linear é usada
  • Intervalo de coordenadas: Tanto os valores x quanto y devem estar entre 0 e 1
  • Definição da curva: Forma uma Bezier cúbica de (0,0) passando por cp1 e cp2 até (1,1)
  • Predefinições comuns:
    • 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"
}

Prioridade da Animação

Quando um elemento tem múltiplos métodos de animação aplicados:

  1. Keyframes (definidos no array keyframes) - animações de propriedades padrão
  2. Animações de Nó (no array animations) - animações avançadas como expressões, caminhos, sequências
  3. Animações Procedurais - animações programáticas

Se a mesma propriedade é animada por múltiplos métodos, a ordem de prioridade é:

  • Mais Alta: Animações de nó (expressão, procedural, caminho, sequência)
  • Média: Animações de keyframe
  • Mais Baixa: Valores de propriedade estáticos

Isso permite que animações avançadas substituam valores de keyframe quando necessário.

Notas Importantes

  • Referência de Tempo: Os valores de time dos keyframes são relativos ao tempo de start do elemento, não ao tempo absoluto da linha do tempo.
  • Múltiplas Propriedades: Um único keyframe pode animar múltiplas propriedades simultaneamente incluindo-as em stateObj.
  • Interpolação: Propriedades entre keyframes são automaticamente interpoladas. A curva de interpolação é definida pelos pontos de controle Bezier cp1 e cp2.
  • Primeiro Keyframe: Se o primeiro keyframe não estiver no tempo 0, o elemento interpolará de seu estado inicial para o primeiro keyframe.
  • Interpolação de Cores: Propriedades de cor (como fill, stroke) são interpoladas no espaço RGB.