Animatio

Systema animatio provectum ad creandum animatios dynamicas, procedurales, et expressionum basatas ultra simplices keyframes.

Typa Animatios

Systema animatio plura genera sustinet ultra traditum keyframes:

• Expressio: Expressiones JavaScript per frame evaluatae
• Procedurale: Exemplaria animatios procedurales inclusa
• Series: Animatios sequentiales basatae in gradibus
• Via: Motus per vias Bezier

Haec animatios provectae in proprietate animations array elementorum definuntur.

Animatios Nodi vs Keyframes

Animatios Nodi (animations array):

• Animatios procedurales, expressionum basatae, aut sequentes viam
• Quisque frame evaluatae
• Maior prioritas quam keyframes
• Possunt superare valores keyframe

Keyframes (keyframes array):

• Simple interpolatio proprietatis inter puncta definita
• Minor prioritas
• Praedictibilis, facilis ad edendum

Prioritas Animatios

Cum plura methoda animatios eandem proprietatem petunt:

1. Maxima: Animatios nodi (expressio, procedurale, via, series)
2. Media: Animatios keyframe
3. Minima: Valoribus proprietatum staticorum

Animatios Expressionum

Expressiones sunt codex JavaScript per frame evaluatus, cum accessu ad variabiles contextus animatios.

Variabiles Contextus Disponibiles

{
  time: number; // Tempus absolutum currente (secundae)
  localTime: number; // Tempus relativum ad initium elementorum
  duration: number; // Duratio elementorum
  progress: number; // Progressus normalizatus (0-1)
  index: number; // Index elementorum in coetu
  total: number; // Elementa totalia in coetu
  fps: number; // Frames per secundam
  width: number; // Lata canvas
  height: number; // Altitudo canvas
  value: any; // Valor proprietatis currentis
}

Exemplum Expressionis

Animatio bounciens utendo functionibus Math:

{
"id": "element-1",
"type": "Image",
"start": 0,
"duration": 5,
"animations": [
  {
    "type": "expression",
    "target": "y",
    "enabled": true,
    "expression": "100 + Math.abs(Math.sin(localTime * 3)) * 200",
    "startTime": 0,
    "duration": 5,
    "loop": true
  }
]
}

Expressio Complexa

Combinare plura effecta:

{
"animations": [
  {
    "type": "expression",
    "target": "rotation",
    "expression": "(localTime * 2 * Math.PI / duration) + Math.sin(localTime * 4) * 0.1",
    "loop": true
  },
  {
    "type": "expression",
    "target": "scaleX",
    "expression": "1 + Math.sin(localTime * 5) * 0.2",
    "loop": true
  }
]
}

Animatios Procedurales

Exemplaria animatios inclusa cum parametris configurabilibus.

Typa Proceduralia

• wiggle: Oscillatio fortuita (utilis ad effectus camerae manualis)
• wave: Motus undae sinus/cosinus
• bounce: Effectus elasticus bounciens
• pulse: Scalatio rhythmica

Exemplum Wiggle

{
"animations": [
  {
    "type": "procedural",
    "proceduralType": "wiggle",
    "target": "rotation",
    "enabled": true,
    "frequency": 2,
    "amplitude": 0.1,
    "loop": true
  }
]
}

Animatios Series

Animatios basatae in gradibus quae valores in specificis intervallis mutant.

Exemplum Series

Textus per diversas magnitudines circulans:

{
"animations": [
  {
    "type": "sequence",
    "target": "fontSize",
    "enabled": true,
    "values": [24, 32, 40, 32, 24],
    "stepDuration": 0.5,
    "loop": true
  }
]
}

Animatios Viae

Animare elementa per vias curvarum Bezier.

Exemplum Viae

Motus circularis:

{
"animations": [
  {
    "type": "path",
    "target": "position",
    "enabled": true,
    "path": "M 100,100 a 200,200 0 1,1 0,1 Z",
    "autoRotate": true,
    "duration": 4,
    "loop": true
  }
]
}

Syntaxim Viae Proprietatis

Proprietas target utitur notatione puncti ad specificandas proprietates nidificatas:

• Simple: "x", "y", "rotation"
• Nidificatae: "scale.x", "position.y"
• Array: "colors[0]", "points[2].x"

Exempla Resolutionis Target

{
  "target": "x"              // Positio x elementorum
  "target": "scaleX"         // Scalatio horizontalis
  "target": "alpha"          // Opacitas
  "target": "fill.color"     // Color implendi (si implens est obiectum)
  "target": "points[0].x"    // Coordinata x primi puncti
}

Modos Combinandi

Regere quomodo animatios coniungantur cum plura eandem proprietatem petunt:

Replace (Default)

{
  "blendMode": "replace",
  "blendWeight": 1.0
}

Completum substituit valor proprietatis.

Add

{
  "blendMode": "add",
  "blendWeight": 0.5
}

Addit ad valor existente (ponderatum). Utilis ad accumulandum offsets.

Multiply

{
  "blendMode": "multiply",
  "blendWeight": 1.0
}

Multiplicat valorem existentem. Utilis ad effectus scaling.

Exemplum Multarum Animatios

Combinando diversa genera animatios:

{
"id": "animated-element",
"type": "Shape",
"animations": [
  {
    "type": "expression",
    "target": "x",
    "expression": "width / 2 + Math.sin(localTime * 2) * 300",
    "blendMode": "replace",
    "loop": true
  },
  {
    "type": "procedural",
    "proceduralType": "wiggle",
    "target": "rotation",
    "frequency": 3,
    "amplitude": 0.2,
    "blendMode": "add",
    "blendWeight": 0.5
  },
  {
    "type": "sequence",
    "target": "alpha",
    "values": [1, 0.8, 1],
    "stepDuration": 0.3,
    "loop": true,
    "blendMode": "multiply"
  }
],
"keyframes": [
  {
    "id": "kf-1",
    "time": 0,
    "stateObj": { "scaleX": 1 }
  },
  {
    "id": "kf-2",
    "time": 2,
    "stateObj": { "scaleX": 1.5 }
  }
]
}

In hoc exemplum:

• Expressio regit positionem horizontalem (modum substitutivum)
• Procedurale wiggle addit subtilis variationem rotationis
• Series pulsat opacitatem
• Keyframe scalat elementa (minima prioritas)

Notae Importantes

Sandbox Expressionum

• Expressiones currunt in contextu restrictivo ad securitatem
• Accessus ad variabiles contextus animatios tantum
• Non possunt accedere DOM, bibliothecis externis, aut Node.js APIs
• Errores evaluationis animatium disabilitabunt

Efficientia

• Expressiones: Evaluantur quolibet frame - eas simplices serva
• Procedurale: Functiones inclusae optimizatae - valde efficientes
• Series: Minimale onus, bonum pro mutationibus discretis
• Via: Moderatum sumptus, pendet a complexitate viae

Tempus

• startTime et duration sunt relativum ad tempus start elementorum
• localTime in expressionibus incipit a 0 cum elementa incipit
• Animatios respectant terminum duration generalem elementorum

Debugging

• Si animatio non operatur, verifica:
  • enabled: true
  • Proprietas target existit in elemento
  • Syntaxis expressio valida JavaScript est
  • startTime intra durationem elementorum est
  • Nullae typographiae in via proprietatis

Usus Communes

Effectus Sequens Luminis

{
  "type": "expression",
  "target": "x",
  "expression": "value + (targetX - value) * 0.1"
}

Elasticus Bounciens

{
  "type": "expression",
  "target": "scaleY",
  "expression": "1 + Math.exp(-localTime * 3) * Math.cos(localTime * 8) * 0.5"
}

Shake Camerae

{
  "type": "procedural",
  "proceduralType": "wiggle",
  "target": "x",
  "frequency": 10,
  "amplitude": 5
}

Animatio Distincta (in coetibus)

{
  "type": "expression",
  "target": "alpha",
  "expression": "Math.max(0, Math.min(1, (localTime - index * 0.1) * 2))"
}