Tutoriais
Criar animação de texto
1. Exemplo 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 que isso funciona
- Um único clip já basta para o primeiro teste
fadeIneslideInrodam juntos- Coordenadas centralizadas mantêm o layout estável em diferentes resoluções
3. Variações simples
Mude a sensação da entrada:
{
"animations": [
{
"type": "zoomIn",
"duration": 0.5,
"easing": "easeOutBack"
}
]
}Faça o texto pulsar depois 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
- Regras de animação: Animações, keyframes e transições