Tutoriels
Utiliser les animations
1. Animations d'entrée courantes
Fondu entrant :
{
"animations": [
{ "type": "fadeIn", "duration": 0.4 }
]
}Entrée en glissement :
{
"animations": [
{
"type": "slideIn",
"direction": "up",
"distance": 120,
"duration": 0.6
}
]
}Zoom entrant :
{
"animations": [
{
"type": "zoomIn",
"duration": 0.5,
"easing": "easeOutBack"
}
]
}2. Mouvement continu
{
"animations": [
{
"type": "scale",
"from": 1,
"to": 1.08,
"duration": 0.8,
"loop": true,
"easing": "easeInOutSine"
}
]
}3. Combiner les animations avec soin
Il est normal de combiner :
fadeIn + slideInfadeIn + zoomInscale + move
Évitez d'empiler trop d'effets d'entrée sur un même clip, sauf si le style l'exige.
4. Keyframes vs animations
Utilisez animations lorsque :
- vous voulez un preset de mouvement nommé
- vous voulez rédiger plus rapidement
Utilisez keyframes lorsque :
- vous avez besoin de changements de valeur exacts à des moments exacts
- vous avez besoin de courbes de propriété personnalisées
5. Documents liés
- Référence complète du timing : Animations, images clés et transitions
- Extraits utilisables : Exemples