L'inertie et l'Overshoot

Appliquer les principes d'inertie, de continuité du mouvement et de dépassement (Overshoot) pour rendre les animations vivantes.

Introduction

La physique du mouvement : l'inertie

Dans la leçon précédente, nous avons vu comment l'anticipation prépare le spectateur au mouvement en accumulant de l'énergie juste avant l'action. À l'exact opposé de cette préparation, nous allons maintenant étudier comment cette énergie se dissipe une fois l'action terminée : c'est le principe de l'inertie et de l'Overshoot (ou dépassement).

Dans la nature, un objet lancé à pleine vitesse ne s'arrête pas instantanément à sa destination finale : il subit l'inertie et dépasse légèrement sa cible avant de se stabiliser. Recréer ce phénomène physique en motion design permet d'apporter de la souplesse, de la matière et un aspect organique très professionnel à vos animations.

Exemple concret : l'animation d'un bouton d'interface

Imaginons que vous deviez animer l'apparition d'un bouton d'appel à l'action (CTA) sur une page web :

À 0 seconde, l'échelle (Scale) du bouton est à 0% (invisible).
À 10 images, le bouton grandit très vite et dépasse sa taille finale pour atteindre 110%.
À 15 images, il redescend légèrement en dessous de sa taille finale, à 95%.
À 20 images, il se stabilise définitivement à sa taille réelle de 100%.

Le résultat visuel : Le bouton semble "jaillir" à l'écran avec un effet élastique et dynamique très satisfaisant pour l'œil. Il attire immédiatement l'attention de l'utilisateur de manière organique.