Déplacez-vous et créez des animations entièrement personnalisées pour vos projets.
Parfois, vous n'aurez pas besoin d'utiliser les mots clés de lissage de vitesse inclus dans CSS, ou vous utiliserez des animations Web ou un framework JavaScript. Dans ce cas, vous pouvez généralement définir vos propres courbes (ou équations) et contrôler ainsi l'aspect général des animations de votre projet.
Résumé
- Le lissage de vitesse personnalisé 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'ouverture, etc.), mais accentuées à différents endroits.
- Utilisez JavaScript lorsque vous avez besoin de mieux contrôler la chronologie et le comportement des animations (animations élastiques ou rebondissantes, par exemple).
Si vous créez des animations en CSS, vous constaterez que vous pouvez définir les codes temporels en définissant des courbes de Bézier cubiques. En fait, les mots clés ease, ease-in, ease-out et linear correspondent à des courbes de Bézier prédéfinies, détaillées dans les spécifications des transitions CSS et les animations Web.
Ces courbes de Bézier prennent quatre valeurs, ou deux paires de nombres. Chaque paire décrit 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 possède les coordonnées (0, 0) et le point d'arrivée (1, 1) ; vous définissez 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]. Toutefois, la spécification n'est pas claire.
Si vous modifiez les valeurs X et Y de chaque point de contrôle, vous obtenez une courbe très différente, et donc une sensation très différente pour votre animation. Par exemple, si le premier point de contrôle se trouve en bas à droite, le démarrage de l'animation est ralenti. S'il 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, nous avons deux courbes: une courbe de lissage de vitesse standard et une courbe personnalisée:
Afficher une animation avec un lissage de vitesse personnalisé
Voici le code CSS de la courbe personnalisée:
transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
Les deux premiers nombres correspondent aux coordonnées X et Y du premier point de contrôle. Les deux premiers chiffres correspondent 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 l'aspect général de l'animation. Par exemple, avec la courbe ci-dessus, vous pouvez voir qu'elle ressemble à une courbe classique de lissage à l'approche, mais avec une partie de lissage à l'approche (« starting ») raccourcie et un ralentissement allongé à la fin.
Testez cet outil de courbe d'animation et observez comment la courbe affecte la sensation d'une animation.
Utilisez des frameworks JavaScript pour bénéficier d'un contrôle accru
Parfois, la courbe de Bézier cubique peut vous donner encore plus de contrôle. Si vous souhaitez obtenir une sensation de rebond élastique, vous pouvez envisager d'utiliser un framework JavaScript, car il s'agit d'un effet difficile à obtenir avec CSS ou Web Animations.
TweenMax
TweenMax de GreenSock est un framework puissant (ou TweenLite si vous souhaitez que tout soit très léger). En effet, il offre beaucoup de contrôle dans une petite bibliothèque JavaScript, et son codebase est très mature.
Afficher 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 sur votre élément et indiquer les propriétés souhaitées, ainsi que l'accélération souhaitée. Vous pouvez utiliser de nombreuses options de lissage de vitesse. Le code ci-dessous utilise un lissage de vitesse élastique:
var box = document.getElementById('my-box');
var animationDurationInSeconds = 1.5;
TweenMax.to(box, animationDurationInSeconds, {
x: '100%',
ease: 'Elastic.easeOut'
});
La documentation TweenMax présente toutes les options qui s'offrent à vous ici, elle vaut donc la peine d'être lues.