搜尋

首頁  >  問答  >  主體

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

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

為了舉例,我有以下結構的 3 個元件:

(Master是logicComponent和Counter的父級)

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

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

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

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

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

P粉635509719P粉635509719484 天前740

全部回覆(1)我來回復

  • P粉214089349

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

    回覆
    0
  • 取消回覆