Courbe d’assouplissement des normes de conception matérielle
Concevez une fonction de synchronisation CSS cubique-bezier() personnalisée en faisant glisser deux points de contrôle, prévisualisez-la en direct par rapport à une référence linéaire, puis copiez la valeur prête.
Résultat
Cette page ouvre le générateur avec x1=0,4, y1=0, x2=0,2, y2=1 déjà chargés — la courbe d'assouplissement standard publiée dans les directives de mouvement Material Design de Google. Faites glisser la poignée ou modifiez les nombres, ainsi que la courbe, l'aperçu en direct et la mise à jour CSS copiable ensemble.
Material Design appelle cette courbe « assouplissement standard » et la recommande pour la plupart des transitions à l'écran : des éléments qui sont déjà visibles et qui se déplacent, se redimensionnent ou s'estompent simplement sur le même écran. Sa forme accélère rapidement, puis décélère doucement pour se mettre en place, c'est pourquoi tant d'applications Android et d'interfaces utilisateur Web de style Material partagent la même sensation de transition sans que personne ne remarque qu'ils utilisent les mêmes quatre chiffres.
Déposez-le directement dans la fonction de synchronisation de transition ou la fonction de synchronisation d'animation pour une sensation cohérente avec le matériau, ou utilisez-le comme point de référence : les directives du matériau définissent également des courbes de « décélération » et « d'accélération » distinctes pour les éléments entrant ou sortant de l'écran, que cette courbe standard unique n'est pas censée remplacer.