vue.js - 숫자 애니메이션(number animation) animated-number-vue 설치 및 사용예제

서론

화면 개발을 하고 있는데 숫자가 그냥 노출되지 않고 숫자가 카운팅 되듯 보여달라고 요청 받았다. 그래서 처음 생각으로는 슬롯머신 돌아가듯 숫자를 돌리는 애니메이션이 생각나서 퍼블리셔 분에게 요청했다. 그러면서 vue에 그런 애니메이션이 없나 궁금해서 찾아봤더니 바로 animated-number-vue 이라는 라이브러리가 있어서 한번 해봤다.

 

설치

npm install animated-number-vue

vue.js를 하면 자주 보는 설치 명령어다. 터미널에 실행하면 된다.

 

소스

<template>
  <div>
  <animated-number :value="value"  :duration="500"  :formatValue="formatToPrice" v-if="this.animateDisplayFlag" />
  <br>
  <input v-model="value" type="number" />
  <br>
  <br>
  <button type="button" @click="test"> 숫자 애니메이션</button>
  </div>
</template>
<script>
import AnimatedNumber from "animated-number-vue";
 
export default {
  components: {
    AnimatedNumber
  },
  data() {
    return {
      value: 0,
      animateDisplayFlag: false
    };
  },
  methods: {
    formatToPrice(value) {
      return `${Number(value).toFixed(0)}`;
    },
    test(){
      this.animateDisplayFlag = true;
    }
  }
};
</script>

소스는 animated-number components와 input box 1개, button 1개로 구성되어있다. input box에 숫자를 입력하고 버튼을 클릭하면 animated-number component가 노출되며 애니메이션이 실행되는걸로 개발했다.

 

animated-number

prop

• value : 애니메이션 될 번호
• duration : 애니메이션 시간
• round : 값을 반올림하여 소수 제거
• delay : 애니메이션 지연

callback prop

• formatValue : 애니메이션 값 조작 함수
• update : 시간 = 0 에 호출
• run : 지연 완료 후 호출
• begin : 애니메이션이 끝난후 호출
• complete : 모든 루프가 완료된 후 호출

* 참고 : www.npmjs.com/package/animated-number-vue#format-value

 

테스트