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 + slideIn
  • fadeIn + zoomIn
  • scale + 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