React.js でアニメーション カウンターを作成する: ステップバイステップ ガイド

Question

React でカウンターをアニメーション化する方法を探しています。

例として、次の構造を持つ 3 つのコンポーネントがあります:

＃＃＃マスター： ＃＃＃
• 論理コンポーネント
＃＃＃カウンター＃＃＃
• (マスターはlogicComponentとCounterの親です)
ロジック コンポーネントは数値をマスター コンポーネントに渡し、マスター コンポーネントはその数値をアニメーションを実行するカウンター コンポーネントに渡します。 論理コンポーネントは数値を段階的に送信します。つまり、何かが発生するたびに更新を送信します。

たとえば、logicCounter はカウンタをインクリメントするために Master を 10 回呼び出します。Counter は 10 回レンダリングして 10 個の数字を表示すると予想します。 これまでに試したことはすべて、最終的な数値 (10) を増分なしで表示します。

ソリューションを検索した結果、

Window.requestAnimationFrame()

を見つけ、それを React に実装する適切な方法を探していました。

サードパーティの npms/ライブラリの使用を避けようとしています。 あなたの助け/アイデアをお待ちしています。 ありがとう。

Answer 1

React-JS のアニメーション カウンターの場合、「CountUp.js」の構成可能な React コンポーネント ラッパーである 'react-count' を使用します。

https://github.com/glennreyes/react-countupを参照してください。 ライブデモをチェックしてください: https://tr8tk.csb.app/ ステップ：＃＃＃ ＃＃＃＃＃＃インストール：＃＃＃＃＃＃ リーリー

簡単な例:

リーリー

高度な例:

リーリー