18 OCTOBRE 2023
La facilité avancée dans l'animation pas à pas de Tilda
Vous disposez désormais d'une plus grande souplesse pour personnaliser l'assouplissement à chaque étape de l'animation. Auparavant, cinq types d'assouplissement de base étaient disponibles : Linear, Ease-In, Ease-Out, Ease-In-Out et Elastic-Fin. Désormais, vous pouvez ajuster manuellement l'assouplissement, définir des valeurs précises pour cette fonction et profiter de 24 nouveaux types d'assouplissement.
Qu'est-ce que l'assouplissement ?
L'assouplissement est un changement dans la vitesse de mouvement d'un élément au sein d'une animation unique, en ralentissant ou en accélérant. Il confère des propriétés physiques à des objets non physiques : authenticité, caractère et dynamique.

Le mouvement linéaire est celui qui semble le moins naturel. Imaginez que la vitesse de l'élément ne change pas tout au long de l'animation, comme s'il n'y avait pas de gravité et de friction. Une telle animation paraît artificielle et bâclée.

Exemple d'animation sans effet d'assouplissement. La vitesse de l'élément reste constante tout au long du mouvement.

Un exemple avec l'effet d'assouplissement au début et à la fin de l'animation. L'assouplissement au début et à la fin est symétrique.

Quand c'est pratique
Les différents types d'assouplissement et la possibilité de les modifier à l'aide de courbes de Bézier vous permettent d'expérimenter l'animation en fonction du scénario et de choisir le meilleur réglage. Cela s'avérera particulièrement utile pour les projets comportant des animations complexes et impressionnantes.
Un exemple de site web. Pour l'effet d'animation du cercle, le type d'assouplissement "Expo In Out" est utilisé.
Comment configurer l'assouplissement
  1. Sélectionnez un élément et ajoutez-lui une étape d'animation.
  2. Réglez Move (ou tout autre paramètre) et allez dans Easing → Edit.
  3. Vous pouvez ici sélectionner le type d'assouplissement dans la liste, modifier l'assouplissement à l'aide de courbes de Bézier ou définir des valeurs précises. Ci-dessous, vous pouvez exécuter le modèle d'animation pour cette étape en cliquant sur l'icône de lecture.

L'assouplissement est personnalisé séparément pour chaque étape de l'animation.
Configuration du paramètre Easing dans l'éditeur Zero Block de Tilda
Où trouver l'éditeur de ciselage : Animation pas à pas → Easing → Editer.
Voir aussi
Le nouveau bloc transforme n'importe quel bloc zéro en une fenêtre contextuelle.

 Vous pouvez désormais créer et modifier des éléments vectoriels dans l'éditeur Zero Block du constructeur de sites web Tilda.

Fabriqué le
Tilda