Overview

Element

Effect

Sleutelbeeld

Sleutelbeelden definiëren specifieke eigenschapswaarden op specifieke tijden, met interpolatie ertussen om soepele animaties te creëren.

EigenschapTypeVereistVoorbeeldWaardenbereikOmschrijving
idstringtrue--De unieke identificatie van het sleutelbeeld.
timenumbertrue--De tijd waarop het sleutelbeeld plaatsvindt, in seconden (relatief aan de starttijd van het element).
stateObjobjecttrue--Het toestandsobject dat eigenschapswaarden bevat op dit sleutelbeeld. Kan elke animeerbare eigenschap bevatten zoals x, y, rotatie, schaalX, schaalY, alfa, enz.
cp1objectfalse--Het eerste controlepunt voor Bezier-curve verzachting. Coördinaten zijn genormaliseerd (bereik 0-1). Voorbeeld: {x: 0.25, y: 0.1}
cp2objectfalse--Het tweede controlepunt voor Bezier-curve verzachting. Coördinaten zijn genormaliseerd (bereik 0-1). Voorbeeld: {x: 0.25, y: 1}

Bezier Easing Controlepunten

De cp1 en cp2 eigenschappen definiëren een kubische Bezier-curve voor aangepaste verzachting tussen sleutelbeelden:

  • Standaard (lineair): Als weggelaten, wordt lineaire interpolatie gebruikt
  • Coördinaatbereik: Zowel x- als y-waarden moeten tussen 0 en 1 liggen
  • Curve-definitie: Vormt een kubische Bezier van (0,0) via cp1 en cp2 naar (1,1)
  • Veelvoorkomende presets:
    • 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"
}

Animatieprioriteit

Wanneer een element meerdere animatiemethoden heeft toegepast:

  1. Sleutelbeelden (gedefinieerd in de keyframes array) - standaard eigenschapanimaties
  2. Node-animaties (in de animations array) - geavanceerde animaties zoals expressies, paden, sequenties
  3. Procedurele animaties - programmatische animaties

Als dezelfde eigenschap door meerdere methoden wordt geanimeerd, is de prioriteitsvolgorde:

  • Hoogste: Node-animaties (expressie, procedureel, pad, sequentie)
  • Gemiddeld: Sleutelbeeldanimaties
  • Laagste: Statische eigenschapswaarden

Dit stelt geavanceerde animaties in staat om sleutelbeeldwaarden te overschrijven wanneer nodig.

Belangrijke Opmerkingen

  • Tijdreferentie: Sleutelbeeld time waarden zijn relatief aan de start tijd van het element, niet absolute tijd op de tijdlijn.
  • Meerdere Eigenschappen: Een enkel sleutelbeeld kan meerdere eigenschappen tegelijkertijd animeren door ze op te nemen in stateObj.
  • Interpolatie: Eigenschappen tussen sleutelbeelden worden automatisch geïnterpoleerd. De interpolatiecurve wordt gedefinieerd door de cp1 en cp2 Bezier controlepunten.
  • Eerste Sleutelbeeld: Als het eerste sleutelbeeld niet op tijd 0 staat, zal het element interpoleren van zijn initiële toestand naar het eerste sleutelbeeld.
  • Kleurinterpolatie: Kleureigenschappen (zoals fill, stroke) worden geïnterpoleerd in RGB-ruimte.