Overview

Element

Effect

Keyframe

Schlüsselbilder definieren spezifische Eigenschaftswerte zu bestimmten Zeiten, mit Interpolation zwischen ihnen, um flüssige Animationen zu erstellen.

EigenschaftTypErforderlichBeispielWertbereichBeschreibung
idstringtrue--Die eindeutige Kennung des Schlüsselbildes.
timenumbertrue--Die Zeit, zu der das Schlüsselbild auftritt, in Sekunden (relativ zur Startzeit des Elements).
stateObjobjecttrue--Das Zustandsobjekt, das Eigenschaftswerte zu diesem Schlüsselbild enthält. Kann jede animierbare Eigenschaft wie x, y, rotation, scaleX, scaleY, alpha usw. enthalten.
cp1objectfalse--Der erste Kontrollpunkt für das Bezier-Kurven-Easing. Koordinaten sind normalisiert (0-1 Bereich). Beispiel: {x: 0.25, y: 0.1}
cp2objectfalse--Der zweite Kontrollpunkt für das Bezier-Kurven-Easing. Koordinaten sind normalisiert (0-1 Bereich). Beispiel: {x: 0.25, y: 1}

Bezier-Easing-Kontrollpunkte

Die Eigenschaften cp1 und cp2 definieren eine kubische Bezier-Kurve für benutzerdefiniertes Easing zwischen Schlüsselbildern:

  • Standard (linear): Wenn weggelassen, wird lineare Interpolation verwendet
  • Koordinatenbereich: Sowohl x- als auch y-Werte sollten zwischen 0 und 1 liegen
  • Kurvendefinition: Bildet eine kubische Bezier von (0,0) über cp1 und cp2 nach (1,1)
  • Gemeinsame Voreinstellungen:
    • 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"
}

Animationspriorität

Wenn ein Element mehrere Animationsmethoden angewendet hat:

  1. Schlüsselbilder (definiert im keyframes Array) - Standard-Eigenschaftsanimationen
  2. Knotenanimationen (im animations Array) - fortgeschrittene Animationen wie Ausdrücke, Pfade, Sequenzen
  3. Prozedurale Animationen - programmatische Animationen

Wenn dieselbe Eigenschaft von mehreren Methoden animiert wird, ist die Prioritätsreihenfolge:

  • Höchste: Knotenanimationen (Ausdruck, prozedural, Pfad, Sequenz)
  • Mittel: Schlüsselbildanimationen
  • Niedrigste: Statische Eigenschaftswerte

Dies ermöglicht es fortgeschrittenen Animationen, Schlüsselbildwerte bei Bedarf zu überschreiben.

Wichtige Hinweise

  • Zeitreferenz: Die time Werte der Schlüsselbilder sind relativ zur start Zeit des Elements, nicht zur absoluten Zeitlinie.
  • Mehrere Eigenschaften: Ein einzelnes Schlüsselbild kann mehrere Eigenschaften gleichzeitig animieren, indem sie im stateObj enthalten sind.
  • Interpolation: Eigenschaften zwischen Schlüsselbildern werden automatisch interpoliert. Die Interpolationskurve wird durch die cp1 und cp2 Bezier-Kontrollpunkte definiert.
  • Erstes Schlüsselbild: Wenn das erste Schlüsselbild nicht zur Zeit 0 ist, interpoliert das Element von seinem Anfangszustand zum ersten Schlüsselbild.
  • Farbinterpolation: Farbeigenschaften (wie fill, stroke) werden im RGB-Raum interpoliert.