Tutoriales
Crear animación de texto
1. Ejemplo completo
{
"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. Por qué funciona
- Un clip basta para la primera prueba
fadeInyslideInse ejecutan juntos- Las coordenadas centradas hacen que la composición sea estable en distintas resoluciones
3. Variaciones simples
Cambia la sensación de entrada:
{
"animations": [
{
"type": "zoomIn",
"duration": 0.5,
"easing": "easeOutBack"
}
]
}Haz que el texto pulse después de entrar:
{
"animations": [
{
"type": "scale",
"from": 1,
"to": 1.05,
"duration": 0.6,
"loop": true,
"easing": "easeInOutSine"
}
]
}4. Documentos relacionados
- Campos de texto: Elemento de texto
- Reglas de animación: Animaciones, keyframes y transiciones