119 lines
3.3 KiB
Markdown
119 lines
3.3 KiB
Markdown
---
|
|
name: managing-animations
|
|
description: Creates and manages CSS and JavaScript animations (keyframes, transitions, sprite animations, canvas animations). Use when adding visual animations or user feedback
|
|
allowed-tools: Read, Write, Grep, Glob, Bash
|
|
---
|
|
|
|
# Système d'Animation
|
|
|
|
Crée animations fluides (CSS, JS, sprites, particules) pour feedback utilisateur et jeux.
|
|
|
|
## Table des matières
|
|
|
|
- [Quand utiliser](#quand-utiliser)
|
|
- [Types d'animations](#types-danimations)
|
|
- [Patterns essentiels](#patterns-essentiels)
|
|
- [Optimisations](#optimisations)
|
|
- [Workflow](#workflow)
|
|
- [Checklist](#checklist)
|
|
- [En cas de doute](#en-cas-de-doute)
|
|
|
|
## Quand utiliser
|
|
|
|
- Feedback visuel (boutons, transitions)
|
|
- Animations sprites (jeux arcade)
|
|
- Transitions slides
|
|
- Effets visuels (particules, explosions)
|
|
- Micro-interactions UI
|
|
- Animations canvas jeux
|
|
|
|
## Types d'animations
|
|
|
|
**CSS Transitions :**
|
|
|
|
- Hover, focus, state changes
|
|
- Propriétés : transform, opacity (GPU), color, box-shadow
|
|
- Easing : ease-out (UI), ease-in-out (transitions), linear (rotations)
|
|
|
|
**CSS Keyframes :**
|
|
|
|
- Pulse, shake, bounce, rotate, fade
|
|
- Animations répétables sans événement
|
|
- Trouve keyframes existantes dans CSS
|
|
|
|
**JavaScript (requestAnimationFrame) :**
|
|
|
|
- Animations complexes programmées
|
|
- `performance.now()` → progress (0-1) → easing → interpolate
|
|
- Batch multiple animations dans un RAF
|
|
|
|
**Sprite Animations (Canvas) :**
|
|
|
|
- Frame-based (FPS adaptatif)
|
|
- Sprite sheets, frame index qui boucle
|
|
- Directional sprites, callbacks (onLoop, onComplete)
|
|
|
|
**Particle Systems :**
|
|
|
|
- Effets visuels (explosions, étincelles)
|
|
- Particle class (position, velocity, life, color)
|
|
- Max 100 simultanées, object pooling, cleanup
|
|
|
|
Examine animationen existantes dans le code.
|
|
|
|
## Patterns essentiels
|
|
|
|
- **Feedback :** Correct (vert, pulse), Wrong (rouge, shake), Coins (trajectoires)
|
|
- **Transitions slides :** TranslateX, fade, cleanup, historique
|
|
- **Accessibility :** Respecter `prefers-reduced-motion`, fallback simple
|
|
- **Easing :** Linear, Quad, Cubic, Elastic, Bounce (trouve dans utils)
|
|
|
|
## Optimisations
|
|
|
|
**GPU Acceleration :**
|
|
|
|
- Utiliser transform + opacity (pas left/top)
|
|
- will-change: transform, opacity (retirer après)
|
|
|
|
**Performance :**
|
|
|
|
- Batch RAF multiple animations
|
|
- Particules < 100 simultanées, cleanup chaque frame
|
|
- 60 FPS obligatoire (profile DevTools)
|
|
|
|
## Workflow
|
|
|
|
1. **Choisir type :** CSS transition (simple), CSS keyframes (feedback), RAF (complexe), Sprite (jeu), Particles (effets)
|
|
2. **Examiner existant :** Patterns, conventions, optimisations
|
|
3. **Implémenter :** Suivre mêmes patterns, cleanup, 60 FPS
|
|
4. **Tester :** Fluide, prefers-reduced-motion OK, mobile OK
|
|
|
|
## Checklist
|
|
|
|
- [ ] CSS pour animations simples
|
|
- [ ] RAF pour animations complexes
|
|
- [ ] transform + opacity (GPU)
|
|
- [ ] prefers-reduced-motion respecté
|
|
- [ ] Particules < 100, cleanup
|
|
- [ ] Easing appropriée
|
|
- [ ] 60 FPS maintenu
|
|
- [ ] Testé mobile
|
|
|
|
## En cas de doute
|
|
|
|
**Règles absolues :**
|
|
|
|
1. Examiner animations similaires dans code
|
|
2. Prioriser CSS (simplicité + perf)
|
|
3. JavaScript uniquement si nécessaire
|
|
4. Profile DevTools (60 FPS OBLIGATOIRE)
|
|
5. Toujours respecter prefers-reduced-motion
|
|
|
|
**Références :**
|
|
|
|
- CSS keyframes/transitions existantes
|
|
- Feedback animations (coins, scores)
|
|
- Slides transitions
|
|
- Jeux arcade (sprites, particules)
|
|
- Easing functions utils
|