Tutoriels
Créer une animation de texte
1. Exemple complet
{
"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. Pourquoi cela fonctionne
- Un seul clip suffit pour le premier test
fadeInetslideIns'exécutent ensemble- Les coordonnées centrées rendent la composition stable sur différentes résolutions
3. Variations simples
Changez la sensation de l'entrée :
{
"animations": [
{
"type": "zoomIn",
"duration": 0.5,
"easing": "easeOutBack"
}
]
}Faites pulser le texte après son apparition :
{
"animations": [
{
"type": "scale",
"from": 1,
"to": 1.05,
"duration": 0.6,
"loop": true,
"easing": "easeInOutSine"
}
]
}4. Documents liés
- Champs texte : Élément texte
- Règles d'animation : Animations, images clés et transitions