在 React.js 中建立動畫計數器：逐步指南

Question

我正在尋找一種在 React 中為計數器設定動畫的方法。

為了舉例，我有以下結構的 3 個元件：

• 師父：
• • 邏輯元件
• • Counter

（Master是logicComponent和Counter的父級）

邏輯元件將一個數字傳遞給主控元件，主控元件將其傳遞給應該執行動畫的計數器元件。 邏輯元件以增量方式發送數字，也就是說，每次發生某些事情時，它都會發送更新。

例如，logicCounter 呼叫 Master 十次來遞增計數器，我預期 Counter 將渲染 10 次，顯示 10 個數字。 到目前為止我嘗試過的所有方法都顯示了最終數字（10），沒有任何增量。

在尋找解決方案後，我遇到了 Window.requestAnimationFrame()，我正在尋找在 React 中實現它的正確方法。

我試圖避免使用第 3 方 npms/函式庫。

希望得到您的幫助/想法。 謝謝。

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