Lorsque vous traitez avec des animations CSS complexes, il y a une tendance à créer de vastes @keyframes avec de nombreuses déclarations. Il y a cependant quelques astuces dont je veux parler qui pourrait aider à faciliter les choses, tout en restant à Vanilla CSS:
Le premier est plus largement utilisé et familier, mais le second est moins courant. Il pourrait y avoir de bonnes raisons à cela - les animations de chaîne avec des virgules sont relativement plus faciles que de gêner les différentes fonctions de synchronisation qui sont à notre disposition et ce qu'elles font. Il existe une fonction de synchronisation particulièrement soignée qui nous donne un contrôle total pour créer des fonctions de synchronisation personnalisées. Ce serait cubic-bezier () et dans ce post, je vous montrerai la puissance de celui-ci et comment il peut être utilisé pour créer une animation fantaisie sans trop de complexité.
Commençons par un exemple de base montrant comment nous pouvons déplacer une balle dans des directions intéressantes, comme une forme d'infini (∞):
Comme vous pouvez le voir, il n'y a pas de code complexe - seulement deux images clés et une fonction cubic-bezier (). Et pourtant, une animation finale de l'infini assez complexe est ce que nous obtenons.
Cool, non? Discutons-y!
Commençons par la définition officielle:
Une fonction de relâchement cubique de Bézier est un type de fonction de soulagement définie par quatre nombres réels qui spécifient les deux points de contrôle, P1 et P2, d'une courbe de Bézier cubique dont les points finaux P0 et P3 sont fixés respectivement à (0, 0) et (1, 1). Les coordonnées X de P1 et P2 sont limitées à la plage [0, 1].
La courbe ci-dessus définit comment la sortie (axe y) se comportera en fonction de l'heure (axe x). Chaque axe a une plage de [0, 1] (ou [0% 100%]). Si nous avons une animation qui dure deux secondes (2s), alors:
0 (0%) = 0S 1 (100%) = 2s
Si nous voulons animer la gauche de 5px à 20px, alors:
0 (0%) = 5px 1 (100%) = 20px
X, le temps, est toujours limité à [0 1]; Cependant, y, la sortie peut aller au-delà [0 1].
Mon objectif est de régler P1 et P2 afin de créer les courbes suivantes:
Vous pouvez penser que cela est impossible à réaliser car, comme indiqué dans la définition, P0 et P3 sont fixés à (0,0) et (1,1), ce qui signifie qu'ils ne peuvent pas être sur le même axe. C'est vrai, et nous utiliserons quelques astuces mathématiques pour les «approximer».
Commençons par la définition suivante: Cubic-Bezier (0,1,5,1,1,5). Cela nous donne la courbe suivante:
Notre objectif est de se déplacer (1,1) et de le faire à (0,1), ce qui n'est pas techniquement possible. Nous allons donc essayer de le simuler.
Nous avons précédemment dit que notre gamme est [0 1] (ou [0% 100%]), alors imaginons le cas lorsque 0% est très proche de 100%. Si, par exemple, nous voulons animer le haut de 20px (0%) à 20,1px (100%), nous pouvons dire que les états initiaux et finaux sont égaux.
HM, mais notre élément ne bougera pas du tout, non?
Eh bien, il se déplacera un peu car la valeur y dépasse 20,1px (100%). Mais cela ne suffit pas pour nous donner un mouvement perceptible:
Mettons à jour la courbe et utilisons à la place Cubic-Bezier (0,4,1,4). Remarquez comment notre courbe est beaucoup plus grande qu'auparavant:
Mais pourtant, toujours pas de mouvement - même si la valeur supérieure traverse 3 (ou 300%). Essayons Cubic-Bezier (0,20,1,20):
Oui! Cela a commencé à bouger un peu. Avez-vous remarqué l'évolution de la courbe chaque fois que nous augmentons la valeur? Cela rapproche notre point (1,1) «visuellement» de (0,1) lorsque nous zoomons pour voir la courbe complète et c'est l'astuce.
En utilisant Cubic-Bezier (0, V, 1, V) où V est une très grande valeur et les états initiaux et finaux sont très proches l'un de l'autre (ou presque égal), nous pouvons simuler la courbe parabolique.
Un exemple vaut mille mots:
J'ai appliqué la fonction «magique» cubic-seier dedans à l'animation supérieure, plus une linéaire appliquée à gauche. Cela nous donne la courbe que nous voulons.
Pour ceux d'entre vous, les gens en mathématiques là-bas, nous pouvons décomposer cette explication. Un Cubic Bezier peut être défini en utilisant la formule suivante:
P = (1 - t) ³p0 3 (1 - t) ²tp1 3 (1 - t) t²p2 t³p3
Chaque point est défini comme suit: p0 = (0,0), p1 = (0, v), p2 = (1, v) et p3 = (1,1).
Cela nous donne les deux fonctions pour les coordonnées x et y:
V est notre grande valeur et T est dans la plage [0 1]. Si nous considérons notre exemple précédent, y (t) nous donnera la valeur du haut tandis que x (t) est le temps de progression. Les points (x (t), y (t)) définiront ensuite notre courbe.
Trouvez la valeur maximale de y (t). Pour cela, nous devons trouver la valeur de t qui nous donnera y '(t) = 0 (lorsque la dérivée est égale à 0):
Y '(t) = 3T² - 6VT 3V
Y '(t) = 0 est une équation quadratique. Je sauterai la partie ennuyeuse et je vous donnerai le résultat, qui est t = v - sqrt (v² - v).
Lorsque v est une grande valeur, t sera égal à 0,5. Ainsi, y (0,5) = max et x (0,5) seront égaux à 0,5. Cela signifie que nous atteignons la valeur maximale à mi-chemin de l'animation, qui est conforme à la courbe parabolique que nous voulons.
De plus, y (0,5) nous donnera (1 6V) / 8 et cela nous permettra de trouver la valeur maximale basée sur V. et comme nous utiliserons toujours une grande valeur pour V, nous pouvons simplifier à 6V / 8 = 0,75 V.
Nous avons utilisé V = 500 dans le dernier exemple, donc la valeur maximale là serait à 375 (ou 37500%) et nous obtenons ce qui suit:
Il y a une différence de -0,5px entre 0 et 1. Appelons cela l' incrément . Pour 375 (ou 37500%), nous avons une équation de 375 * -0,5px = -187,5px. Notre élément animé atteint le haut: 12,5px (200px - 187,5px) et nous donne l'animation suivante:
En haut: 200px (à 0% du temps) → Top: 12,5 pix (à 50% du temps) → Top: 199,5px (à 100% du temps)
Ou, exprimé une autre manière:
En haut: 200px (à 0%) → Top: 12,5px (à 50%) → Top: 200px (à 100%)
Faisons la logique opposée. Quelle valeur de v devrions-nous utiliser pour rendre notre élément en haut: 0px? L'animation sera 200px → 0px → 199,5px, nous avons donc besoin de -200px pour atteindre 0px. Notre incrément est toujours égal à -0,5px. La valeur maximale sera égale à 200 / 0,5 = 400, donc 0,75 V = 400 ce qui signifie V = 533,33.
Notre élément touche le haut!
Voici un chiffre qui résume ces mathématiques que nous venons de faire:
Nous utiliserons presque exactement la même astuce pour créer une courbe sinusoïdale mais avec une formule différente. Cette fois, nous utiliserons Cumbic-Bezier (0,5, V, 0,5, -V)
Comme nous l'avons fait auparavant, voyons comment la courbe évoluera lorsque nous augmenterons la valeur:
Je pense que vous avez probablement l'idée maintenant. L'utilisation d'une grande valeur pour V nous rapproche d'une courbe sinusoïdale.
En voici une autre avec une animation continue - une véritable animation sinusoïdale!
Passons aux calculs pour celui-ci! Parcourir la même formule qu'auparavant, nous obtiendrons les fonctions suivantes:
Cette fois, nous devons trouver les valeurs minimales et maximales pour y (t). Y '(t) = 0 nous donnera deux solutions. Après avoir résolu pour ceci:
Y '(t) = 3 (6v 1) t² - 18VT 3V = 0
… Nous obtenons:
Pour une grande valeur de V, nous avons t '= 0,211 et t "= 0,789. Cela signifie que y (0,211) = max et y (0,789) = min.
Y (0,211) est égal à 0,289 V et Y (0,789) à -0,289v. Nous avons obtenu ces valeurs avec un certain arrondi étant donné que V est très grand.
Notre courbe sinusoïdale doit également traverser l'axe x (ou y (t) = 0) à la moitié du temps (ou x (t) = 0,5). Afin de le prouver, nous utilisons le deuxième dérivé de y (t) - qui devrait être égal à 0 - donc y '' (t) = 0.
Y '' (t) = 6 (6v 1) t - 18V = 0
La solution est 3V / (6V 1), et pour une grande valeur V, la solution est de 0,5. Cela nous donne y (0,5) = 0 et x (0,5) = 0,5, ce qui confirme que notre courbe traverse le point (0,5,0).
Prenons maintenant l'exemple précédent et essayons de trouver la valeur de V qui nous ramène en haut: 0%. Nous avons:
Nous avons besoin de -50% pour atteindre le sommet: 0%, donc 0,289 V * -0,1% = -50%, ce qui nous donne V = 1730,10.
Comme vous pouvez le voir, notre élément touche le haut et disparaît en bas parce que nous avons l'animation suivante:
Top: 50% → Top: 0% → Top: 50% → Top: 100% → Top: 50% → et ainsi de suite ...
Un chiffre pour résumer le calcul:
Et un exemple pour illustrer toutes les courbes ensemble:
Oui, vous voyez quatre courbes! Si vous regardez attentivement, vous remarquerez que j'utilise deux animations différentes, une à 49,9% (une augmentation de -0,01%) et une autre à 50,1% (une augmentation de 0,01%). En modifiant le signe de l'incrément, nous contrôlons la direction de la courbe. Nous pouvons également contrôler les autres paramètres du Cubic Bezier (pas le V qui devrait rester une grande valeur) pour créer plus de variations à partir des mêmes courbes.
Et ci-dessous, une démo interactive:
Revenons à notre exemple initial de balle se déplaçant sous la forme d'un symbole de l'infini. J'ai simplement combiné deux animations sinusoïdales pour le faire fonctionner.
Si nous combinons ce que nous avons fait auparavant avec le concept de plusieurs animations, nous pouvons obtenir des résultats étonnants. Là encore est l'exemple initial, cette fois comme une démo interactive. Changez les valeurs et voyez la magie:
Allons plus loin et ajoutons un petit CSS Houdini au mélange. Nous pouvons animer une déclaration de transformation complexe grâce à @Property (mais CSS Houdini est limité au support Chrome et Edge en ce moment).
Quel genre de dessins pouvez-vous faire avec cela? En voici quelques-uns que j'ai pu faire:
Et voici une animation spirographe:
Et une version sans CSS Houdini:
Il y a quelques choses à retirer de ces exemples:
La même technique peut également être utilisée avec la propriété de transition CSS car elle suit la même logique en ce qui concerne les fonctions de synchronisation. C'est génial car nous sommes en mesure d'éviter les images clés lors de la création d'un effet de survol complexe.
Voici ce que j'ai fait sans images clés:
Mario saute grâce à la courbe parabolique. Nous n'avions besoin d'aucun immeuble clés pour créer cette animation à shake sur survol. La courbe sinusoïdale est parfaitement capable de faire tout le travail.
Voici une autre version de Mario, cette fois en utilisant CSS Houdini. Et, oui, il saute toujours grâce à la courbe parabolique:
Pour faire bonne mesure, voici des effets de volants plus sophistiqués sans images clés (encore une fois, Chrome et Edge uniquement):
Maintenant, vous avez des courbes magiques cubes-bezier () et les mathématiques derrière eux. L'avantage, bien sûr, est que des fonctions de synchronisation personnalisées comme celle-ci, nous faisons des animations sophistiquées sans les images clés complexes que nous atteignons généralement.
Je comprends que tout le monde n'a pas d'esprit en mathématiques et ça va. Il existe des outils pour aider, comme le ceaser de Matthew Lein, qui vous permet de faire glisser les points de courbe pour obtenir ce dont vous avez besoin. Et, si vous ne l'avez pas déjà mis en signet, Cubic-Bezier.com en est un autre. Si vous voulez jouer avec le cubic-berzier en dehors du monde CSS, je recommande Desmos où vous pouvez voir des formules mathématiques.
Quelle que soit la façon dont vous obtenez vos valeurs cubiques-Bezier (), j'espère que vous avez maintenant une idée de leurs pouvoirs et comment ils peuvent aider à créer un code plus agréable dans le processus.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Application de plateforme de trading Ouyi
Méthode d'implémentation de la fonction de lecture en ligne Python
Que comprend le stockage par cryptage des données ?
Le rôle de la fonction de validation
Récupération de données sur disque SSD
Quelle est la différence entre webstorm et idée ?
Méthode de requête de nom de domaine de deuxième niveau
Quelle est la limite de transfert d'Alipay ?
Que dois-je faire si eDonkey Search ne parvient pas à se connecter au serveur ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
