Sortez des sentiers battus et créez des animations totalement personnalisées pour vos projets.
Dans certains cas, il est préférable de ne pas utiliser les mots clés de lissage de vitesse inclus dans CSS, ou d'utiliser des animations Web ou un framework JavaScript. Dans ce cas, vous pouvez généralement définir vos propres courbes (ou équations), ce qui vous permet de contrôler de manière très précise l'apparence des animations de votre projet.
Résumé
- L'atténuation personnalisée vous permet de donner plus de personnalité à vos projets.
- Vous pouvez créer des courbes de Bézier cubiques qui ressemblent aux courbes d'animation par défaut (lissage à l'éloignement, lissage à l'approche, etc.), mais en mettant l'accent à différents endroits.
- Utilisez JavaScript lorsque vous avez besoin de mieux contrôler le timing et le comportement des animations, par exemple pour les animations élastiques ou rebondissantes.
Si vous créez une animation avec le CSS, vous constaterez que vous pouvez définir des courbes de Bézier cubiques pour définir la durée. En fait, les mots clés ease, ease-in, ease-out et linear correspondent à des courbes de Bézier prédéfinies, qui sont détaillées dans la spécification des transitions CSS et la spécification Web Animations.
Ces courbes de Bézier prennent quatre valeurs, ou deux paires de nombres, chaque paire décrivant les coordonnées X et Y des points de contrôle d'une courbe de Bézier cubique. Le point de départ de la courbe de Bézier a les coordonnées (0, 0) et le point d'arrivée a les coordonnées (1, 1). Vous pouvez définir les valeurs X et Y des deux points de contrôle. Les valeurs X des deux points de contrôle doivent être comprises entre 0 et 1, et la valeur Y de chaque point de contrôle peut dépasser la limite [0, 1], bien que la spécification n'indique pas de combien.
Modifier les valeurs X et Y de chaque point de contrôle vous permet d'obtenir une courbe très différente, et donc une animation très différente. Par exemple, si le premier point de contrôle se trouve dans la zone inférieure droite, le démarrage de l'animation sera lent. Si elle se trouve en haut à gauche, le démarrage sera rapide. À l'inverse, si le deuxième point de contrôle se trouve en bas à droite de la grille, il sera rapide à la fin ; s'il se trouve en haut à gauche, la fin sera lente.
À titre de comparaison, voici deux courbes : une courbe de type "ease-in-out" (début progressif, fin progressive) et une courbe personnalisée :
Afficher une animation avec un lissage de vitesse personnalisé
Le code CSS de la courbe personnalisée est le suivant:
transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
Les deux premiers chiffres correspondent aux coordonnées X et Y du premier point de contrôle, et les deux derniers aux coordonnées X et Y du deuxième point de contrôle.
Créer une courbe personnalisée est très amusant et vous permet de contrôler de manière significative l'ambiance de l'animation. Par exemple, d'après la courbe ci-dessus, vous pouvez constater qu'elle ressemble à une courbe de lissage à l'approche/l'éloignement classique, mais avec une portion de lissage à l'approche ou "démarrage" raccourcie, et un ralentissement prolongé à la fin.
Testez cet outil de courbe d'animation et observez l'impact de la courbe sur l'expérience utilisateur.
Utiliser des frameworks JavaScript pour plus de contrôle
Parfois, vous avez besoin d'encore plus de contrôle qu'une courbe de Bézier cubique. Si vous souhaitez obtenir un rebond élastique, vous pouvez envisager d'utiliser un framework JavaScript, car cet effet est difficile à obtenir avec CSS ou Web Animations.
TweenMax
L'un des frameworks puissants est TweenMax de GreenSock (ou TweenLite si vous souhaitez rester vraiment léger), car il offre beaucoup de contrôle dans une petite bibliothèque JavaScript et il s'agit d'un codebase très mature.
Voir une animation de lissage élastique
Pour utiliser TweenMax, incluez ce script dans votre page :
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
Une fois le script en place, vous pouvez appeler TweenMax en fonction de votre élément et lui indiquer les propriétés souhaitées et le lissage de vitesse de votre choix. Vous pouvez utiliser de nombreuses options d'atténuation. Le code ci-dessous utilise une atténuation élastique :
var box = document.getElementById('my-box');
var animationDurationInSeconds = 1.5;
TweenMax.to(box, animationDurationInSeconds, {
x: '100%',
ease: 'Elastic.easeOut'
});
Nous vous recommandons de la lire, car la documentation sur TweenMax présente toutes les options qui s'offrent à vous.