Créer un compteur animé dans React.js : un guide étape par étape
P粉635509719
P粉635509719 2023-10-21 19:46:40
0
1
687

Je cherche un moyen d'animer un compteur dans React.

Par exemple, j'ai 3 composants de la structure suivante :

  • Maître :
    • Composants logiques
    • Compteur

(Master est le parent de logicComponent et Counter)

Le composant logique transmet un numéro au composant maître, qui le transmet au composant compteur qui doit effectuer l'animation. Le composant logique envoie des nombres de manière incrémentielle, c'est-à-dire qu'à chaque fois que quelque chose se produit, il envoie une mise à jour.

Par exemple, logicCounter appelle Master dix fois pour incrémenter le compteur, je m'attends à ce que Counter s'affiche 10 fois, affichant 10 nombres. Tout ce que j'ai essayé jusqu'à présent affiche le nombre final (10) sans aucun incrément.

Après avoir cherché une solution, je suis tombé sur Window.requestAnimationFrame() et je cherchais un moyen approprié de l'implémenter dans React.

J'essaie d'éviter d'utiliser des npm/bibliothèques tiers.

J'espère votre aide/idées. Merci.

P粉635509719
P粉635509719

répondre à tous(1)
P粉214089349

Pour les compteurs animés dans React-JS, j'utilise 'react-count' : un wrapper de composant React configurable autour de "CountUp.js".

Veuillez vous référer à : https://github.com/glennreyes/react-countup. Découvrez la démo en direct : https://tr8tk.csb.app/ Étapes :

Installation :

*npm install react-countup --save*
or
*yarn add react-countup*

Exemple simple :

import React from 'react';
import { render } from 'react-dom';
import CountUp from 'react-countup';

render(
  <CountUp start={0} end={160526} />,
  document.getElementById('root')
);

Exemple avancé :

import React from 'react';
import { render } from 'react-dom';
import CountUp from 'react-countup';

const onComplete = () => {
  console.log('Completed!');
};

const onStart = () => {
  console.log('Started!');
};

render(
  <CountUp
    className="account-balance"
    start={160527.0127}
    end={-875.0319}
    duration={2.75}
    useEasing={true}
    useGrouping={true}
    separator=" "
    decimals={4}
    decimal=","
    prefix="EUR "
    suffix=" left"
    onComplete={onComplete}
    onStart={onStart}
  />,
  document.getElementById('root'),
);
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal