我正在尋找一種在 React 中為計數器設定動畫的方法。
為了舉例,我有以下結構的 3 個元件:
(Master是logicComponent和Counter的父級)
邏輯元件將一個數字傳遞給主控元件,主控元件將其傳遞給應該執行動畫的計數器元件。 邏輯元件以增量方式發送數字,也就是說,每次發生某些事情時,它都會發送更新。
例如,logicCounter 呼叫 Master 十次來遞增計數器,我預期 Counter 將渲染 10 次,顯示 10 個數字。 到目前為止我嘗試過的所有方法都顯示了最終數字(10),沒有任何增量。
在尋找解決方案後,我遇到了 Window.requestAnimationFrame(),我正在尋找在 React 中實現它的正確方法。
我試圖避免使用第 3 方 npms/函式庫。
希望得到您的幫助/想法。 謝謝。
P粉2140893492023-10-22 09:06:16
對於 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'), );