vue.js - vue-roller 사용 및 정리

지난 글 vue.js - 숫자 애니메이션(number animation) animated-number-vue 에서 숫자 애니메이션을 개발했었는데 animated-number-vue 는 애니메이션 효과가 적어서 다른 라이브러리를 찾는 중 vue-roller를 찾게 되어 글을 작성하게 되었다. 두 라이브러리 간단 차이점 및 vue-roller 라이브러리 설명과 테스트를 진행해보겠다.

 

차이점

animated-number-vue 

특징 : 숫자 카운팅. 숫자가 0부터 시작하여 입력한 숫자까지 해당 영역에 카운팅되어 노출

vue-roller

특징 : 숫자 롤링. 입력은 텍스트로 byte 별 텍스트가 롤링된다.

ex) 92 입력시 9 영역은 0~9까지 돌고 9 선택. 2 영역은 0~2까지 돌고 2 선택

v-roller 설치하기

npm i vue-roller

참고 URL : www.npmjs.com/package/vue-roller

 

옵션(option)

text(Required)

text는 필수값이다. 넣은 숫자가 롤링된다. 영

<Roller text="1234"></Roller>

transition

애니메이션이 완료되는 시간을 초 단위로 설정합니다. 기본적으로 0.5입니다.

* 테스트는 2초로 적용

<Roller text="1234" :transition="2"></Roller>

isNumberFormat

숫자 입력시 쉼표를 천 단위 구분 기호로 표시하려면 true로 설정할 수 있습니다. 기본적으로 false 입니다.

<Roller text="1234" :isNumberFormat="true"></Roller>

isStatic

일회용 애니메이션에 사용됩니다. (성능 개량) 기본적으로 false 입니다. 

<Roller :text="text" :isStatic="true"></Roller>

isStatic을 하면 초기 롤링 지난뒤에 text처럼 바뀌는데 원인이나 이유는 모르겠다.

 

charList

애니메이션에 사용되는 캐릭터 목록을 설정합니다. 기본적으로 ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"] 입니다.(숫자)

<Roller :text="text" :charList="['a', 'b', 'c', 'o']"></Roller>

defaultChar

페이지가 처음로드 될 때 표시 할 텍스트를 설정합니다 (애니메이션이 실제로 시작되기 전).
charList에 포함되어야 합니다. 기본적으로 "" 입니다.

<Roller text="10" defaultChar="9"></Roller>

기본적으로 1이나 0은 0부터 시작하기때문에 애니메이션 효과가 거의 없지만 9부터 시작하면 애니메이션 효과가 더 잘보인다.

wordWrap

줄 바꿈 문자 수를 설정합니다 (단어 구분 : 모두 유지). 기본적으로 0입니다. (단어 분리 : break-all)

<Roller :text="text" wordWrap="5"></Roller>

* 해당 기능은 이해를 하지 못해서 별도의 이미지가 없습니다.

 

Event : animationend

애니메이션이 끝날 때 이벤트를 호출합니다.

<Roller :text="text" @animationend="event"></Roller>

vue-roller 기능에 대해 정리해보았다. 사용하려면 라이브러리 기능을 알아야 정확하게 사용할수 있는데 이렇게 정리하면서 사용시에 필요한 기능을 편하게 사용할수 있을것 같다.