Overview

Element

Effect

Keyframe

I fotogrammi definiscono valori specifici delle proprietà in tempi specifici, con interpolazione tra di essi per creare animazioni fluide.

ProprietàTipoRichiestoEsempioIntervallo di valoriDescrizione
idstringtrue--L'identificatore unico del fotogramma chiave.
timenumbertrue--Il tempo in cui si verifica il fotogramma chiave, in secondi (relativo al tempo di inizio dell'elemento).
stateObjobjecttrue--L'oggetto di stato contenente i valori delle proprietà a questo fotogramma chiave. Può includere qualsiasi proprietà animabile come x, y, rotazione, scaleX, scaleY, alpha, ecc.
cp1objectfalse--Il primo punto di controllo per l'easing della curva Bezier. Le coordinate sono normalizzate (intervallo 0-1). Esempio: {x: 0.25, y: 0.1}
cp2objectfalse--Il secondo punto di controllo per l'easing della curva Bezier. Le coordinate sono normalizzate (intervallo 0-1). Esempio: {x: 0.25, y: 1}

Punti di Controllo Easing Bezier

Le proprietà cp1 e cp2 definiscono una curva Bezier cubica per un easing personalizzato tra i fotogrammi chiave:

  • Predefinito (lineare): Se omesso, viene utilizzata l'interpolazione lineare
  • Intervallo di coordinate: Sia i valori x che y devono essere compresi tra 0 e 1
  • Definizione della curva: Forma una Bezier cubica da (0,0) attraverso cp1 e cp2 a (1,1)
  • Preset comuni:
    • 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à dell'Animazione

Quando un elemento ha applicati più metodi di animazione:

  1. Fotogrammi chiave (definiti nell'array keyframes) - animazioni di proprietà standard
  2. Animazioni dei nodi (nell'array animations) - animazioni avanzate come espressioni, percorsi, sequenze
  3. Animazioni procedurali - animazioni programmatiche

Se la stessa proprietà è animata da più metodi, l'ordine di priorità è:

  • Massima: Animazioni dei nodi (espressione, procedurale, percorso, sequenza)
  • Media: Animazioni dei fotogrammi chiave
  • Minima: Valori di proprietà statici

Questo consente alle animazioni avanzate di sovrascrivere i valori dei fotogrammi chiave quando necessario.

Note Importanti

  • Riferimento Temporale: I valori time dei fotogrammi chiave sono relativi al tempo start dell'elemento, non al tempo assoluto della timeline.
  • Multiple Proprietà: Un singolo fotogramma chiave può animare più proprietà simultaneamente includendole in stateObj.
  • Interpolazione: Le proprietà tra i fotogrammi chiave sono automaticamente interpolate. La curva di interpolazione è definita dai punti di controllo Bezier cp1 e cp2.
  • Primo Fotogramma Chiave: Se il primo fotogramma chiave non è al tempo 0, l'elemento interpolerà dal suo stato iniziale al primo fotogramma chiave.
  • Interpolazione dei Colori: Le proprietà colore (come fill, stroke) sono interpolate nello spazio RGB.