在 React.js 中建立動畫計數器：逐步指南-PHP中文網路問答

文章專題學習下載問答程式設計字典遊戲最近更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)

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

P粉635509719 2023-10-21 19:46:40

440

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

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

師父：
- 邏輯元件
- Counter

（Master是logicComponent和Counter的父級）

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

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

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

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

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

P粉635509719

全部回覆(1)

P粉2140893492023-10-22 09:06:16 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(
  ,
  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(
  ,
  document.getElementById('root'),
);