Tutorials
Textanimation erstellen
1. Vollständiges Beispiel
{
"meta": {
"version": "2.0.0",
"width": 1920,
"height": 1080,
"fps": 30,
"background": "#101828"
},
"tracks": [
{
"id": "main",
"clips": [
{
"id": "headline",
"type": "text",
"start": 0,
"duration": 4,
"text": "Launch Faster",
"transform": {
"x": "50%",
"y": "50%"
},
"style": {
"fontSize": 92,
"fontWeight": 800,
"fill": "#ffffff",
"textAlign": "center",
"shadowColor": "#000000",
"shadowBlur": 20
},
"animations": [
{
"type": "fadeIn",
"duration": 0.4
},
{
"type": "slideIn",
"direction": "up",
"distance": 100,
"duration": 0.6,
"easing": "easeOutCubic"
}
]
}
]
}
]
}2. Warum das funktioniert
- Für den ersten Test reicht ein einzelner Clip
fadeInundslideInlaufen zusammen- Zentrale Koordinaten halten das Layout über verschiedene Auflösungen hinweg stabil
3. Einfache Varianten
Ändere das Gefühl beim Auftakt:
{
"animations": [
{
"type": "zoomIn",
"duration": 0.5,
"easing": "easeOutBack"
}
]
}Lass den Text nach dem Eintritt pulsieren:
{
"animations": [
{
"type": "scale",
"from": 1,
"to": 1.05,
"duration": 0.6,
"loop": true,
"easing": "easeInOutSine"
}
]
}4. Verwandte Dokumente
- Text-Felder: Textelement
- Animationsregeln: Animationen, Keyframes und Übergänge