005 - Animation System

Das Animation System interpoliert Werte über normalisierte Zeit (0-1).

Das Problem

Animationen in Creative Coding sind komplizierter als sie aussehen:

• Timing – Wann startet was? Wie lange dauert es?
• Easing – Lineare Bewegung wirkt roboterhaft, natürliche Bewegung beschleunigt/bremst
• Koordination – Mehrere Animationen gleichzeitig, aber synchron
• Loops – Endlos, einmal, hin-und-her?

Ohne System landet man bei Spaghetti-Code mit if (frame > 60 && frame < 120).

Die Lösung

Das Animation System trennt Zeit von Wert:

1. AnimationClock – Eine Uhr, die von 0 bis 1 läuft (normalisierte Zeit)
2. Animation – Übersetzt Zeit in einen Wert (z.B. Scale von 0.8 bis 1.2)
3. AnimationComposer – Verwaltet mehrere Animations an einer Clock

Warum normalisierte Zeit? Weil 0.5 immer "in der Mitte" bedeutet, egal ob die Animation 1 Sekunde oder 10 Minuten dauert. Easing-Funktionen erwarten 0-1, Loops springen von 1 zurück auf 0. Alles wird einfacher.

Warum separate Clock? Weil du eine Clock pausieren kannst, ohne jede Animation einzeln anzufassen. Oder zwei Animationen an dieselbe Clock hängen, damit sie synchron laufen.

Konzept

┌───────────────────┐      ┌──────────────────────┐
│  AnimationClock   │─────▶│  AnimationComposer   │
│  position: 0-1    │      └──────────────────────┘
└───────────────────┘                  │
                          ┌────────────┼────────────┐
                          │            │            │
                          ▼            ▼            ▼
                   ┌────────────┐ ┌────────────┐ ┌────────────┐
                   │ Animation  │ │ Animation  │ │ Animation  │
                   │     1      │ │     2      │ │     3      │
                   └────────────┘ └────────────┘ └────────────┘
                          │            │            │
                          ▼            ▼            ▼
                   ┌────────────┐ ┌────────────┐ ┌────────────┐
                   │   Wert     │ │   Wert     │ │   Wert     │
                   └────────────┘ └────────────┘ └────────────┘

Kernkonzept:

• Animation definiert: WHEN (Timeline) + HOW (Playback) + WHAT (Value)
• Clock liefert normalisierte Zeit (0-1)
• Composer orchestriert mehrere Animations
• Jede Animation erzeugt interpolierten Wert

Komponenten

AnimationClock

Zentrale Zeitquelle mit position 0-1.

Eigenschaften:

Methoden:

Time Modes:

AnimationComposer

Orchestriert mehrere Animations.

API:

Animation Basis-Klasse

Gemeinsame Struktur für alle Animation-Typen.

Timeline-Optionen:

Playback-Optionen:

BreatheAnimation

Pulsierender Wert (z.B. für Scale).

Optionen:

Modi:

Output: number (z.B. 0.8 → 1.2 → 0.8)

RotateAnimation

Kontinuierliche Rotation.

Optionen:

Modi:

Output: number (Winkel in Grad)

ShakeAnimation

Vibration / Zittern.

Optionen:

Modi:

Output: { x: number, y: number } (Offset)

Easing

Easing-Funktionen für sanfte Übergänge.

Verfügbare Easings:

Verwendung:

import { Easing } from '@carstennichte/cc-toolbox';

const eased = Easing.get('easeOutCubic')(t);

Tweakpane Integration

Alle Animations haben Tweakpane-Support.

Module-Pattern:

Legacy: AnimationTimer

Für zeitgesteuerte Throttling (noch von ColorSet genutzt).