Maison > Article > interface Web > Utilisez CSS pour créer des courbes de Bézier

Utilisez CSS pour créer des courbes de Bézier

一个新手original: 2017-10-08 09:32:183038parcourir

Préface

Avant de comprendre cubic-bezier, vous devez comprendre l'effet d'animation en CSS3, qui est un contenu important dans animation-timing-function et transition-timing-function.

Ontologie

Introduction

cubic-bezier Également connue sous le nom de Bézier cubique, c'est principalement une fonction qui génère des courbes de vitesse pour animation. la stipulation est cubic-bezier(bc6fe54a88198feaad90e17e912675f1, 22e181b6d31cf86e9ad22800df920dd0, be787f7ac9828fa514a83e4c791ae092, f4bf86c47d72eed593f57bb329a5f9f8).

Nous pouvons brièvement comprendre cubic-bezier à partir de l'image ci-dessous :

Ce que nous devons savoir à partir de l'image ci-dessus, c'est la plage de valeurs de cubic-bezier :

P0 : Valeur par défaut (0, 0)
P1 : Valeur dynamique (x1, y1)
P2 : Valeur dynamique (x2, y2)
P3 : Valeur par défaut (1, 1)

Ce à quoi nous devons prêter attention, ce sont les valeurs de P1 et P2, et la plage de valeurs de X 轴 est de 0 à 1. la valeur cubic-bezier sera invalide lorsqu'elle dépassera la plage ; la valeur de Y 轴 n'est pas spécifiée, et bien sûr, elle n'a pas besoin d'être trop grande. La compréhension la plus directe de

est de placer comme une ligne droite sur l'axe des coordonnées avec une plage de seulement 1 et de retirer deux points du milieu (la plage de valeurs de l'axe X est [0, 1], l'axe Y est arbitraire), et la courbe finale formée est la courbe de vitesse de l'animation .

Utilisation de

Dans l'exemple de test :

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style>
    .animation {
      width: 50px;
      height: 50px;
      background-color: #ed3;
      -webkit-transition:  all 2s;
           -o-transition:  all 2s;
              transition:  all 2s;
    }
    .animation:hover {
      -webkit-transform:  translateX(100px);
          -ms-transform:  translateX(100px);
           -o-transform:  translateX(100px);
              transform:  translateX(100px);
    }
  </style>
</head>
<body>
  <p class="animation"></p>
</body>
</html>

On peut voir dans le navigateur que lorsque la souris est déplacée sur l'élément, l'élément commence à se déplacer vers le à droite, il démarre lentement puis devient plus rapide en s'éloignant, il revient à l'origine selon la courbe d'origine.

Dans l'exemple, lorsqu'on n'ajoute pas transition ou autre cubic-bezier à timing-function, la courbe de vitesse par défaut est ease, et la courbe de vitesse à cet instant est :

Ajoutons ensuite cubic-bezier(.17, .86, .73, .14) au code :

....animation {
  ...  -webkit-transition:  
  all 2s cubic-bezier(.17, .86, .73, .14);       
  -o-transition:  all 2s cubic-bezier(.17, .86, .73, .14);          
  transition:  all 2s cubic-bezier(.17, .86, .73, .14);
}
...

Actualisez ensuite la page pour observer l'effet. Vous verrez que l'animation se déplace très lentement pendant le processus d'exécution. La vitesse est similaire. La courbe de mouvement à ce moment est :

Plusieurs valeurs fixes couramment utilisées correspondant à la valeur `cubic-bezier` et à la courbe de vitesse <.>

ease：cubic-bezier(.25, .1, .25, 1)
liner：cubic-bezier(0, 0, 1, 1) / cubic-bezier(1, 1, 0, 0)
ease-in：cubic-bezier(.42, 0, 1, 1)
ease-out：cubic-bezier(0, 0, .58, 1)
ease-in-out：cubic-bezier(.42, 0, .58, 1)
In Out . Back（来回的缓冲效果）：cubic-bezier(0.68, -0.55, 0.27, 1.55)

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Solution au point (.) dans le sélecteur CSSArticle suivant：Solution au point (.) dans le sélecteur CSS

Articles Liés

Voir plus