Overview

Element

Effect

Keyframe

Keyframes definunt specificas proprietatum valores ad specificos tempora, cum interpolatione inter eos ad creandum lenes animationes.

ProprietasTypusRequiriturExemplumAmbitus ValorisDescriptio
idstringtrue--Identificator unicus keyframe.
timenumbertrue--Tempus in quo keyframe fit, in secundis (relativum ad tempus initii elementorum).
stateObjobjecttrue--Objectum statum continens valores proprietatum ad hoc keyframe. Potest includere ullam animabilem proprietatem sicut x, y, rotationem, scaleX, scaleY, alpha, etc.
cp1objectfalse--Primus punctum controlis pro Bezier curva leniatione. Coordinatae normalizatae sunt (0-1 range). Exemplum: {x: 0.25, y: 0.1}
cp2objectfalse--Secundus punctum controlis pro Bezier curva leniatione. Coordinatae normalizatae sunt (0-1 range). Exemplum: {x: 0.25, y: 1}

Bezier Easing Control Points

Proprietates cp1 et cp2 definunt cubicam Bezier curvam pro customi leniatione inter keyframes:

  • Default (linearis): Si omittitur, linearis interpolatio adhibetur
  • Coordinate range: Utrumque x et y valores inter 0 et 1 esse debent
  • Curva definitio: Formam cubicam Bezier ex (0,0) per cp1 et cp2 ad (1,1) format
  • Communes praefinitae:
    • 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"
}

Animation Priority

Cum elementum plures methodos animationis applicatas habet:

  1. Keyframes (definiti in keyframes array) - standard property animations
  2. Node Animations (in animations array) - advanced animations like expressions, paths, sequences
  3. Procedural Animations - programmatic animations

Si eadem proprietas per varias methodos animatur, ordo prioritas est:

  • Altissimum: Node animations (expressio, proceduralis, via, series)
  • Medium: Keyframe animations
  • Infimum: Statica proprietatum valores

Hoc sinit advanced animations superare valores keyframe cum necesse est.

Important Notes

  • Tempus Referentia: Keyframe time valores relativi sunt ad tempus start elementorum, non ad tempus absolutum temporis.
  • Multiplices Proprietates: Unus keyframe plures proprietates simul animare potest includendo eas in stateObj.
  • Interpolatio: Proprietates inter keyframes automatice interpolantur. Curva interpolationis definita est per cp1 et cp2 Bezier control points.
  • Primus Keyframe: Si primus keyframe non est ad tempus 0, elementum interpolabit ex sua initiali statu ad primum keyframe.
  • Color Interpolatio: Proprietates coloris (sicut fill, stroke) in spatio RGB interpolantur.