Symbol
[Typescript] 0부터 증가하는 카운트업 효과 구현하기 (feat. to-one)
to-one 라이브러리를 사용하여 0부터 증가하는 카운트업 효과를 구현합니다.
2024-02-29
카운트업 효과는 기업의 중요한 지표나 연도 등을 강조할때 사용되는 효과입니다.
이 글에서는 제가 만든 라이브러리 to-one 을 사용하여 카운트업 효과를 구현하는 방법과 예제를 보여드리겠습니다.

설치

우선 npm을 사용하여 프로젝트에 to-one 라이브러리를 설치합니다.

또는 yarn을 사용할 수도 있습니다.

사용법

설치한 to-one 라이브러리에서 zeroToOne 함수를 불러옵니다.
zeroToOne 함수는 0에서 1까지 증가하는 유리수를 반환하는 함수이며 필수 옵션에는 duration과 partition 이 있습니다.
duration 옵션은 증가하는 시간(ms), partition 옵션은 1 까지의 분할수를 결정합니다.
편의를 위해 사용 예제는 react 환경을 사용했습니다.

easing

zeroToOne 함수는 easing 옵션을 제공합니다.
easing 옵션을 사용하면 0부터 1까지 증가하는 속도를 점점 빨라지거나 점점 느려지게 설정할 수 있습니다.
아래 코드는 점점 빨라지는 ease-out 옵션을 사용한 예제입니다.

결과 화면