Animation

Système d'animation avancé pour créer des animations dynamiques, procédurales et basées sur des expressions, au-delà des simples images clés.

Types d'Animation

Le système d'animation prend en charge plusieurs types au-delà des images clés traditionnelles :

• Expression : Expressions JavaScript évaluées par image
• Procédural : Modèles d'animation procédurale intégrés
• Séquence : Animations séquentielles basées sur des étapes
• Chemin : Mouvement le long de chemins de Bézier

Ces animations avancées sont définies dans la propriété animations du tableau des éléments.

Animations de Nœud vs Images Clés

Animations de Nœud (animations array) :

• Animations procédurales, basées sur des expressions ou suivant un chemin
• Évaluées à chaque image
• Priorité plus élevée que les images clés
• Peuvent remplacer les valeurs des images clés

Images Clés (keyframes array) :

• Interpolation simple des propriétés entre des points définis
• Priorité plus faible
• Prévisible, facile à modifier

Priorité d'Animation

Lorsque plusieurs méthodes d'animation ciblent la même propriété :

1. Plus Élevée : Animations de nœud (expression, procédural, chemin, séquence)
2. Moyenne : Animations d'images clés
3. Plus Basse : Valeurs de propriétés statiques

Animations par Expression

Les expressions sont du code JavaScript évalué par image, avec accès aux variables de contexte d'animation.

Variables de Contexte Disponibles

{
  time: number; // Temps absolu actuel (secondes)
  localTime: number; // Temps relatif au début de l'élément
  duration: number; // Durée de l'élément
  progress: number; // Progression normalisée (0-1)
  index: number; // Index de l'élément dans le groupe
  total: number; // Total des éléments dans le groupe
  fps: number; // Images par seconde
  width: number; // Largeur du canevas
  height: number; // Hauteur du canevas
  value: any; // Valeur actuelle de la propriété
}

Exemple d'Expression

Animation de rebond utilisant des fonctions 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
  }
]
}

Expression Complexe

Combiner plusieurs effets :

{
"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
  }
]
}

Animations Procédurales

Modèles d'animation intégrés avec des paramètres configurables.

Types Procéduraux

• wiggle : Oscillation aléatoire (utile pour les effets de caméra à main)
• wave : Mouvement de vague sinusoïdale
• bounce : Effet de rebond élastique
• pulse : Mise à l'échelle rythmique

Exemple de Wiggle

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

Animations de Séquence

Animations basées sur des étapes qui changent les valeurs à des intervalles spécifiques.

Exemple de Séquence

Texte alternant entre différentes tailles :

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

Animations de Chemin

Animer des éléments le long de chemins de courbe de Bézier.

Exemple de Chemin

Mouvement circulaire :

{
"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
  }
]
}

Syntaxe du Chemin de Propriété

La propriété target utilise la notation par point pour spécifier les propriétés imbriquées :

• Simple : "x", "y", "rotation"
• Imbriqué : "scale.x", "position.y"
• Tableau : "colors[0]", "points[2].x"

Exemples de Résolution de Cible

{
  "target": "x"              // Position x de l'élément
  "target": "scaleX"         // Échelle horizontale
  "target": "alpha"          // Opacité
  "target": "fill.color"     // Couleur de remplissage (si le remplissage est un objet)
  "target": "points[0].x"    // Coordonnée x du premier point
}

Modes de Fusion

Contrôlez comment les animations se combinent lorsque plusieurs ciblent la même propriété :

Remplacer (Par Défaut)

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

Remplace complètement la valeur de la propriété.

Ajouter

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

Ajoute à la valeur existante (pondérée). Utile pour accumuler des décalages.

Multiplier

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

Multiplie la valeur existante. Utile pour les effets de mise à l'échelle.

Exemple de Multiples Animations

Combinaison de différents types d'animation :

{
"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 }
  }
]
}

Dans cet exemple :

• L'expression contrôle la position horizontale (mode de remplacement)
• Le wiggle procédural ajoute une légère variation de rotation
• La séquence pulse l'opacité
• L'image clé met à l'échelle l'élément (priorité la plus basse)

Notes Importantes

Bac à Sable d'Expression

• Les expressions s'exécutent dans un contexte restreint pour des raisons de sécurité
• Accès uniquement aux variables de contexte d'animation
• Ne peut pas accéder au DOM, aux bibliothèques externes ou aux API Node.js
• Les erreurs d'évaluation désactiveront l'animation

Performance

• Expressions : Évaluées à chaque image - gardez-les simples
• Procédural : Fonctions intégrées optimisées - très efficaces
• Séquence : Surcharge minimale, bon pour les changements discrets
• Chemin : Coût modéré, dépend de la complexité du chemin

Timing

• startTime et duration sont relatifs au temps de start de l'élément
• localTime dans les expressions commence à 0 lorsque l'élément commence
• Les animations respectent la limite de duration globale de l'élément

Débogage

• Si une animation ne fonctionne pas, vérifiez :
  • enabled: true
  • La propriété target existe sur l'élément
  • La syntaxe de l'expression est un JavaScript valide
  • startTime est dans la durée de l'élément
  • Pas de fautes de frappe dans le chemin de propriété

Cas d'Utilisation Courants

Effet de Suivi Doux

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

Rebond Élastique

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

Secousse de Caméra

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

Animation Décalée (en groupes)

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