🎮 LEVEL 06 • ANIMATION NINJA

Animierte Grafiken

Wo Bilder zum Leben erwachen – ohne Video

📚 PHASE 1: TUTORIAL

Was sind animierte Grafiken?

Animierte Grafiken sind kurze, sich wiederholende Bewegtbilder – oft ohne Ton, aber mit großer Wirkung. Sie werden verwendet für:

Ladeanimationen
Emojis und Reaktionen
Erklärgrafiken (z. B. Pfeile, Diagramme)
Interaktive Web-Elemente

MERKE: "Im Gegensatz zu Videos sind sie oft kleiner, schneller ladbar und loopbar!"

📊 Animationsformate im Vergleich

Format	Typ	Vorteile	Nachteile	Web-Einsatz
GIF	Pixel	Überall unterstützt, einfach	Nur 256 Farben, große Datei	Soziale Medien, einfache Animationen
APNG	Pixel	Volle Farbtiefe, Transparenz	Nicht in allen Browsern (z. B. Edge)	Modernes Web, wenn GIF nicht reicht
WebP (animiert)	Pixel	30 % kleiner als GIF, volle Farbe	Ältere Browser nicht kompatibel	Zukunftsfähiges Web
SVG-Animation	Vektor	Skalierbar, extrem klein, editierbar	Nur für einfache Bewegungen	Logos, Icons, Infografiken

♿ Barrierefreiheit bei Animationen

Nicht alle Nutzer:innen möchten Animationen sehen. Deshalb:

Füge immer einen alt-Text hinzu: <img src="anim.gif" alt="Ladeanimation">
Vermeide blinkende Inhalte (kann bei Epilepsie Anfälle auslösen)
Biete ggf. eine „Stopp-Animation"-Schaltfläche an

🤖

KI Coach Tip

Formuliere einen Prompt zum Vergleich:

„Vergleiche GIF und animiertes SVG hinsichtlich Dateigröße, Skalierbarkeit und Einsatz im Web – inklusive konkreter Beispiele wie Ladeanimation oder Logo."

⚔️ PHASE 2: PRACTICE

Praxis: GIF mit ezgif.com erstellen

Da du auf Schul-PCs keine Software installieren darfst, nutzen wir webbasierte Tools:

Gehe zu ezgif.com
Klicke auf „Make a GIF"
Lade 3–5 Einzelbilder hoch (z. B. aus GIMP exportiert)
Stelle die Geschwindigkeit ein (z. B. 0,5 s pro Bild)
Klicke auf „Create GIF"
Lade die fertige Animation herunter

💡 Tipp: Erstelle die Einzelbilder in GIMP – z. B. durch Verschieben eines Objekts auf verschiedenen Ebenen.

🎨 SVG-Animation – einfach & effektiv

Für vektorbasierte Animationen brauchst du nur HTML/CSS:

Pulsierender Kreis – erstellt mit SVG-Animation

<svg width="120" height="120">
  <circle cx="60" cy="60" r="40" fill="#d4a017">
    <animate attributeName="r" values="40;45;40"
             dur="2s" repeatCount="indefinite"/>
  </circle>
</svg>

🔗 MDN – SVG-Animation

✅ CHECKPOINT: Hast du entweder ein GIF erstellt ODER eine SVG-Animation in HTML eingebunden? Dann weiter zu Phase 3!

🏆 PHASE 3: CHALLENGE

Der "Animations-Meister" Boss

🎯 Mission: Erstelle eine Animation für deine Webseite

⚔️ Aufgaben (wähle eine):

🟢 Einfach: Erstelle eine Ladeanimation (z.B. rotierender Kreis) als animiertes GIF mit ezgif.com

🟠 Mittel: Erstelle eine pulsende SVG-Animation für ein Icon deines Logos

🔴 Schwer: Erstelle eine animierte Ladegrafik mit mehreren sich bewegenden Elementen (z.B. 3 Punkte, die nacheinander erscheinen)

Anforderungen für alle Level:

Animation soll max. 2-3 Sekunden dauern (Loop)
Dateigröße unter 500 KB halten
Barrierefreien alt-Text hinzufügen
In eine HTML-Seite einbinden

🤖 KI Sparring-Partner

Für GIF-Animation:

"Wie erstelle ich in GIMP 3 Einzelbilder für eine Ladeanimation, bei der sich ein Kreis dreht?"

Für SVG-Animation:

"Wie animiere ich 3 Punkte in SVG so, dass sie nacheinander erscheinen (Fade-in)?"

📝 3-2-1 Review

Bevor du weitergehst, reflektiere (klicke und schreibe direkt hier):

3 Dinge die ich gelernt habe:

2 Dinge die ich anwenden werde:

1 Frage die ich noch habe:

💡 Diese Frage kannst du an die KI oder den Lehrer stellen!

💾 Automatische Speicherung: Deine Einträge werden automatisch in deinem Browser gespeichert. Wenn du das Tutorial in VS Code öffnest, bleiben sie erhalten!

🎯 Level 06 Abschluss

📋 Lehrer-Kontrolle

Der Lehrer prüft:

☐ Animation mit ezgif.com erstellt
☐ Alt-Text für Animation vorhanden
☐ reduced-motion Unterstützung erklärt
☐ GIF vs. SVG-Animation Unterschiede verstanden
☐ 3-2-1 Reflexion ausgefüllt

⚠️ Wichtig: Erst nach Lehrer-Freigabe auf "Abschließen" klicken!