Tutoriais
Usar animações
1. Animações de entrada comuns
Fade in:
{
"animations": [
{ "type": "fadeIn", "duration": 0.4 }
]
}Slide in:
{
"animations": [
{
"type": "slideIn",
"direction": "up",
"distance": 120,
"duration": 0.6
}
]
}Zoom in:
{
"animations": [
{
"type": "zoomIn",
"duration": 0.5,
"easing": "easeOutBack"
}
]
}2. Movimento contínuo
{
"animations": [
{
"type": "scale",
"from": 1,
"to": 1.08,
"duration": 0.8,
"loop": true,
"easing": "easeInOutSine"
}
]
}3. Combine animações com cuidado
É normal combinar:
fadeIn + slideInfadeIn + zoomInscale + move
Evite empilhar muitos efeitos de entrada no mesmo clip, a menos que o estilo peça isso.
4. Keyframes vs animações
Use animations quando:
- você quiser um preset de movimento com nome
- você quiser uma autoria mais rápida
Use keyframes quando:
- você precisar de mudanças exatas de valor em tempos exatos
- você precisar de curvas personalizadas de propriedades
5. Documentos relacionados
- Referência completa de timing: Animações, keyframes e transições
- Trechos práticos: Exemplos