Animer les compteurs de nombres

L'animation numérique CSS, par exemple, imaginez un nombre passant de 1 à 2, puis passant de 2 à 3, puis passant de 3 à 4, etc., dure un temps spécifié. C'est comme un compteur, mais contrôlé par la même animation que nous utilisons pour concevoir des animations sur le Web. Cela peut être utile lors de la conception de choses comme des tableaux de bord et peut ajouter une certaine vitalité aux nombres. Étonnamment, cela est désormais possible dans CSS sans trop de compétence. Vous pouvez simplement sauter directement à la nouvelle solution si vous le souhaitez, mais voyons d'abord comment nous l'avons fait dans le passé .

Une façon plutôt logique de numéros d'animation consiste à changer de nombre via JavaScript. Nous pourrions faire un setinterval assez simple, mais voici une réponse plus avancée qui utilise une fonction qui accepte la valeur de démarrage, la valeur finale et la durée, afin que vous puissiez le traiter plus comme une animation:

Si nous n'utilisons que CSS, nous pouvons utiliser le compteur CSS pour animer les nombres en ajustant les comptes dans différents images clés:

Une autre façon consiste à tapisser tous les chiffres d'affilée et à animer leurs positions, montrant un seul numéro à la fois:

Une partie du code en double dans ces exemples peut utiliser des préprocesseurs comme PUG (pour HTML) ou SCSS (pour CSS) qui fournissent des boucles pour les rendre plus faciles à gérer, mais utilisent délibérément le code natif à des fins afin que vous puissiez voir l'idée de base.

Nouvelle solution CSS

Avec le dernier support pour CSS.RegisterProperty et @Property, nous pouvons animer les variables CSS . L'astuce consiste à déclarer les propriétés personnalisées CSS en tant qu'entiers; Cela vous permet de les interpoler comme tout autre entier (par exemple dans une conversion).

 @property --num {
  Syntaxe: '<integer> ';;
  valeur initiale: 0;
  hérite: faux;
}

div {
  transition: --num 1s;
  Counter-Ressest: num var (- num);
}
Div: Hover {
  --num: 10000;
}
div :: After {
  Contenu: compteur (num);
}</integer>

Remarque importante: Au moment de la rédaction, cette syntaxe @Property n'est prise en charge que par Chrome (et d'autres navigateurs de noyau de chrome tels que Edge et Opera), il n'est donc pas compatible avec le navigateur croisé. Si vous créez une application chromée uniquement (comme l'application Electron), vous pouvez l'utiliser immédiatement, sinon attendez. La démo mentionnée ci-dessus a un soutien plus large.

La propriété de contenu CSS peut être utilisée pour afficher les nombres, mais nous devons toujours utiliser un compteur pour convertir les nombres en chaînes, car le contenu ne peut être sorti que<string></string> valeur.

Voyez si nous pouvons soulager l'animation comme une autre animation? Super cool!

Les variables CSS typées peuvent également être utilisées dans @keyframes:

Un inconvénient? Les compteurs ne soutiennent que les entiers. Cela signifie que les décimales et les fractions ne sont pas prises en compte. Nous devons afficher la partie entière et la partie décimale séparément d'une manière ou d'une autre.

Pouvons-nous animer les décimales?

Vous pouvez convertir des décimales (telles que - nombre) en entiers. Voici comment cela fonctionne:

1. Enregistrer un<integer></integer> Variable CSS (par exemple --Integer) et spécifiez la valeur initiale.
2. Puis utilisez calc () pour ronde: --Integer: calc (var (- numéro))

Dans ce cas, - Number se terminera vers l'entier le plus proche et stockera le résultat en - Integer.

 @Property --Integer {
  Syntaxe: "<integer> "
  valeur initiale: 0;
  hérite: faux;
}
- Number: 1234.5678;
--Integer: calc (var (- nombre)); / * 1235 * /</integer>

Parfois, nous n'avons besoin que de pièces entières. Il existe une façon intelligente de le faire: --Integer: Max (var (- nombre) - 0,5, 0). Cela s'applique aux nombres positifs. Cette méthode ne nécessite même pas de calc ().

 / * @property --integer * /
- Number: 1234.5678;
--Integer: max (var (- nombre) - 0,5, 0); / * 1234 * /

Nous pouvons extraire la partie fractionnaire d'une manière similaire, puis la convertir en une chaîne à l'aide d'un compteur (mais n'oubliez pas que la valeur de contenu doit être une chaîne). Pour afficher la chaîne connectée, utilisez la syntaxe suivante:

 Contenu: "String1" var (- String2) Counter (- INTEGER) ...

Voici un exemple complet d'animation avec des pourcentages décimaux:

Autres conseils

Parce que nous utilisons les compteurs CSS, le format de ces compteurs peut être dans d'autres formats que les nombres. Voici un exemple d'animation de la lettre "CSS" dans "Oui"!

Oh, et une autre astuce: nous pouvons déboguer la valeur de l'attribut personnalisé via JavaScript:

 getCompuledStyle (élément) .getPropertyValue ('- variable')

C'est ça! Les fonctionnalités CSS d'aujourd'hui sont incroyables.

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!