🎬 Ken Burns Animation in Publixx
Die Ken Burns Animation erzeugt einen sanften Zoom-Effekt auf Bildern, benannt nach dem Dokumentarfilmer Ken Burns, der diese Technik populär machte.
1. Grundprinzip
Zoom In
scale(1) → scale(1.5)
Zoom Out
scale(1.5) → scale(1)
2. Fokuspunkt (transform-origin)
Der Fokuspunkt bestimmt, wohin der Zoom gerichtet ist.
CSS: transform-origin: X% Y%
| Fokuspunkt | Beschreibung | CSS |
|---|---|---|
| 50% 50% | Mitte (Standard) | transform-origin: center |
| 0% 0% | Oben Links | transform-origin: top left |
| 100% 50% | Rechte Mitte | transform-origin: right center |
| 65% 30% | Benutzerdefiniert (z.B. Gesicht) | transform-origin: 65% 30% |
3. Architektur-Übersicht
4. CSS @keyframes Animation
/* Dynamisch generierte Animation */
@keyframes kenBurns_0 {
0% { transform: scale(1); }
100% { transform: scale(1.5); }
}
/* Auf Bild angewendet */
img {
transform-origin: 65% 40%;
animation: kenBurns_0 5s ease-in-out forwards;
}
Wichtige Eigenschaften:
forwards
Behält den Endzustand nach Animation bei. Ohne "forwards" springt das Bild zurück!
ease-in-out
Sanfter Start und Ende der Animation. Alternativen: linear, ease, ease-in, ease-out
transform-origin
Bestimmt den Mittelpunkt der Transformation. Der Zoom "zielt" auf diesen Punkt.
5. Das "Zurückspringen" Problem & Lösung
7. Export-Matrix
| Export | Animation | Filter | Methode |
|---|---|---|---|
| 🖥️ Editor | ✅ Live | ✅ CSS | renderCanvas({ liveAnimation: true }) |
| 🎬 Fullscreen-Player | ✅ Bei Wechsel | ✅ CSS | startKenBurnsAnimations(container) |
| 📤 Player Export | ✅ Bei Wechsel | ✅ CSS | startKenBurnsAnimations(pageIndex) |
| 🌐 Website Export | ✅ CSS | ✅ CSS | generateKenBurnsCSS(clone) |
| 📄 PDF Export | ❌ Statisch | ✅ Canvas | renderFilteredImage() |
| 📊 PPTX Export | ❌ Statisch | ✅ Canvas | renderFilteredImage() |
| 🖼️ Image Export | ❌ Statisch | ❌ | state.testMode = true |