Erstellen Sie einen animierten Zähler in React.js: eine Schritt-für-Schritt-Anleitung

Question

Ich suche nach einer Möglichkeit, einen Zähler in React zu animieren.

Zum Beispiel habe ich 3 Komponenten der folgenden Struktur:

• Meister:
• • Logische Komponenten
• • Zähler

(Master ist das übergeordnete Element von LogicComponent und Counter)

Die Logikkomponente übergibt eine Zahl an die Master-Komponente, die sie an die Zählerkomponente weitergibt, die die Animation ausführen soll. Die logische Komponente sendet Zahlen inkrementell, d. h. jedes Mal, wenn etwas passiert, sendet sie eine Aktualisierung.

LogicCounter ruft beispielsweise Master zehnmal auf, um den Zähler zu erhöhen. Ich erwarte, dass Counter zehnmal rendert und 10 Zahlen anzeigt. Alles, was ich bisher versucht habe, zeigt die endgültige Zahl (10) ohne Inkremente an.

Nachdem ich nach einer Lösung gesucht hatte, stieß ich auf Window.requestAnimationFrame() und suchte nach einer geeigneten Möglichkeit, es in React zu implementieren.

Ich versuche, die Verwendung von NPMs/Bibliotheken von Drittanbietern zu vermeiden.

Ich hoffe auf eure Hilfe/Ideen. Danke.

Answer 1

对于 React-JS 中的动画计数器，我使用 'react-count' ：围绕“CountUp.js”的可配置 React 组件包装器。

请参考：https://github.com/glennreyes/react-countup。 查看现场演示：https://tr8tk.csb.app/ 步骤：

安装：

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

简单示例：

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

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

高级示例：

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'),
);