Gezeichnete animierte Diagramme

Gezeichnete animierte Diagramme (Entry-in-Viewport-Animation)

Prinzip

Eine Idee pro Diagramm, zuerst in einem Satz formuliert. Die Zeichnung wird einmalig beim Eintritt in den Viewport ausgeführt – in Lesereihenfolge – und bleibt dann statisch. Die Tinte trägt die Botschaft, das Grau trägt den Rest, Beschriftungen befinden sich auf der Zeichnung, es gibt keine Legende. Bei „Animierte Effekte reduzieren“ ist die Zeichnung einfach vorhanden.

ERFORDERLICHER HINTERGRUND: diagram-storytelling (Reduktion auf eine Idee, Verben auf Pfeilen, Knoten = Zustände). emil-design-eng für Kurven und Dauern.

Wann nicht verwenden

• Ein Datendiagramm (Kurve, Balken mit Zahlen): Dataviz-Tool.
• Eine Endlosschleifen-Animation zur Darstellung eines Echtzeit-Prozesses: animierter Prototyp, kein Diagramm.
• Ein Diagramm, das dutzende Male am Tag in einem Tool angezeigt wird: keine Animation.

Vorgehensweise

1. Der Satz. Formuliere die Idee in einem Satz, mit dem Subjekt, das die Tinte trägt („Drei Konzepte erkundet, ein Prototyp ausgewählt“). Enthält der Satz zwei Ideen, erstelle zwei Diagramme.
2. Das Vokabular. Kopiere reference/diagramMotion.ts und reference/DiagramParts.tsx in das Projekt, falls sie nicht vorhanden sind. Definiere Panel, Arrowhead, die Töne oder die Hilfsfunktionen niemals lokal neu.
3. Die Wörter. Eine zweisprachige Datendatei (en/fr): title und desc für die Zugänglichkeit, dann jede Beschriftung. Eine Beschriftung besteht aus maximal ein paar Wörtern. Französisch: Akzente auf Großbuchstaben, geschütztes Leerzeichen vor „:“, kein Geviertstrich.
4. Die Geometrie. viewBox="0 0 960 H" (H zwischen 300 und 400), Koordinaten als benannte Konstanten, 60 px Rand links und rechts für Beschriftungen am Zeilenende (eine Beschriftung textAnchor="end" bei x = 54 wird abgeschnitten). Minimum des Panel: 720 (scrollt auf dem Smartphone).
5. Lesereihenfolge = Verzögerungsreihenfolge. Jedes Element erhält eine Verzögerung in ms, die der Lesereihenfolge folgt: 0 für das zuerst Gelesene, +200–300 ms pro Schritt, 40–110 ms zwischen Elementen derselben Serie. Die Nachricht in Tinte kommt zuletzt (1500–2300 ms). Gesamtzeichendauer: 2–3 s.
6. Die Überprüfung. Rendere die Seite auf localhost, scrolle das Diagramm in die Mitte, warte 3 s, erfasse das Panel (reference/shoot-diagrams.cjs, ausführen mit NODE_PATH=<projekt>/node_modules). Prüfe jeden Screenshot: Beschriftungen am Rand abgeschnitten, Beschriftung unter einem weißen Block, zwei sich berührende Beschriftungen nebeneinander. Korrigieren, neu erfassen. Auch bei 390 px überprüfen.

Kurzreferenz

Element	Hilfsfunktion	Werte
Linie, Pfeil	draw(shown, delay, duration) auf einem path mit pathLength={1}	400 bis 900 ms
Gepunktete Linie	Kann nicht gezeichnet werden: rise (Einblendung)
Block, Beschriftung	rise(shown, delay): steigt um 8 px	500 ms
Zeitbalken	grow(shown, delay, duration): wächst von links	500 bis 800 ms
Rahmen, Linse	open(shown, delay): öffnet sich von 0,96 auf 1	600 ms
Pfeilspitze	<Arrowhead x y angle style={rise(...)}> direkt nach dem draw
Töne	INK #111827 Nachricht, LINE #D1D5DB Ränder, PALE #E5E7EB Hintergründe, #6B7280 sekundäre Beschriftungen, #9CA3AF Verworfenes
Text	Knotentitel 14 px 600, Beschriftung 11 bis 13 px, nie kleiner als 10
Kurve	cubic-bezier(0.22, 1, 0.36, 1) (bereits in den Hilfsfunktionen)

CSS-Transformationen gehen auf ein umschließendes <g>, niemals auf ein Element, das ein SVG-transform hat (dieses würde überschrieben).

Formen nach Ideentyp

• Sequenz, die sich verengt: Knoten in einer Linie, Fächer von Zweigen, nur einer in Tinte fortgesetzt, die anderen in LINE mit „verworfen“.
• Rhythmus in der Zeit: Achse der Wochen oben, eine Zeile pro Akteur, Balken grow, ein Pfeil in Tinte für die relevante Beziehung.
• Öffnung, dann Konvergenz: Eine Linse (open, dann draw der Kontur) über einem proportionalen Balken zu den Dauern.
• Zustände und Übergänge: Knoten = Zustände (gepunktet für Erkundung, grau für Zwischenzustand, voll in Tinte für Festgelegtes), Pfeile mit dem Verb beschriftet, oberhalb der Reihe, um Knoten nicht zu berühren.
• Ein Objekt in Teile zerlegt: Objekt links, Schnitte gepunktet, Pfeil, die Teile als Karten rechts, das erste in Tinte.

Ein vollständiges Beispiel jeder Form: reference/exemple-TemplateDiagrams.tsx und seine Wörter in reference/exemple-templateDiagramsData.ts.

Diagramm-Vignette (Karte, Liste)

Dieselbe Komponente rendert eine feste, beschnittene Ansicht für eine Karte: thumb deaktiviert das Panel und die Enthüllung, und viewBox wird zu einem Rahmen von 520 × 400 (13:10, wie das Kartenbild), zentriert auf die Nachricht. Ein Rahmen pro Diagramm in FRAMES, überprüft mit einem Screenshot bei 350 px Breite: Der Text bleibt lesbar ab 11 px in der Zeichnung. Siehe Drawing und TemplateDiagramThumb in reference/exemple-TemplateDiagrams.tsx.

Häufige Fehler

Fehler	Korrektur
Hinzufügen einer Schleife (Punkt, der zirkuliert, blinkende Zustände) „damit es lebendig wirkt“	Die Zeichnung ist die Bewegung. Eine Schleife nur, wenn Zeit das Thema des Diagramms ist, eine einzige, nach der Zeichnung, via useLoop
Akzentfarben, Grün/Rot für gültig/abgelehnt	Nur Tinte und Grau; eine Entscheidung wird durch die Form (voll, gepunktet, verworfen) oder durch ein Wort ausgedrückt
Legende neben der Zeichnung	Die Wörter sind auf der Zeichnung, nahe dem, was sie benennen
Pfeil beschriftet mit dem Namen des Zielbildschirms	Das Verb des Übergangs („bestätigt“, „nicht ausgewählt“)
Beschriftung zentriert zwischen zwei Knoten mit 60 px Abstand	Sie überlappt die Knoten: platziere sie oberhalb der Reihe
Verzögerungen für den Effekt gewählt	Verzögerungen, die der Lesereihenfolge folgen, Nachricht zuletzt
Für fertig erklärt ohne Screenshot	Screenshot nach Scrollen und 3 s Wartezeit, Screenshot prüfen