06 – Animierte Grafiken 🌀

Wo Bilder zum Leben erwachen – ohne Video

🧠 1. Was sind animierte Grafiken?

Animiertes 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

Im Gegensatz zu Videos sind sie oft kleiner, schneller ladbar und loopbar.

📊 2. 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

🛠️ 3. 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.

🎨 4. 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

♿ 5. 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

🧠 6. KI-Prompt-Training

Aufgabe: Formuliere einen Prompt, mit dem du KI bitten würdest, dir den Unterschied zwischen GIF und animiertem SVG zu erklären – inklusive typischer Anwendungsfälle im Web.

💡 Beispiel:

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