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/ 단계:

설치:

으아아아

간단한 예:

으아아아

고급 예:

으아아아