countup.js 数字动画

Posted 2023-04-05 Amber.Li

countup.js 数字动画

• 1. 安装
• 2. 参数
• 3. Vue组件封装
• • 3.1 组件代码
  • 3.2 调用方式

1. 安装

npm i countup.js

2. 参数

项目	Value
target	string, htmlElement ,HTMLInputElement - id of html element, input, svg text element, or DOM element reference where counting occurs
endVal	number - 最终数字
options?	object选项对象

options 包含属性

  startVal?: number; // number to start at (0)
  decimalPlaces?: number; // number of decimal places (0)
  duration?: number; // animation duration in seconds (2)
  useGrouping?: boolean; // example: 1,000 vs 1000 (true)
  useIndianSeparators?: boolean; // example: 1,00,000 vs 100,000 (false)
  useEasing?: boolean; // ease animation (true)
  smartEasingThreshold?: number; // smooth easing for large numbers above this if useEasing (999)
  smartEasingAmount?: number; // amount to be eased for numbers above threshold (333)
  separator?: string; // grouping separator (',')
  decimal?: string; // decimal ('.')
  // easingFn: easing function for animation (easeOutExpo)
  easingFn?: (t: number, b: number, c: number, d: number) => number;
  formattingFn?: (n: number) => string; // this function formats result
  prefix?: string; // text prepended to result
  suffix?: string; // text appended to result
  numerals?: string[]; // numeral glyph substitution
  enableScrollSpy?: boolean; // start animation when target is in view
  scrollSpyDelay?: number; // delay (ms) after target comes into view
  scrollSpyOnce?: boolean; // run only once
  onCompleteCallback?: () => any; // gets called when animation completes
  plugin?: CountUpPlugin; // for alternate animations

3. Vue组件封装

3.1 组件代码

<template>
    <span ref="count" id="countupId" />
</template>
   
<script>
import  CountUp  from 'countup.js'
const defaultOptions = 
    startVal: 0,
    decimalPlaces: 2,
    duration: 1, 
    useGrouping: true,
    useEasing: true, 
    smartEasingThreshold: 999, 
    smartEasingAmount: 333, // amount to be eased for numbers above threshold (333)
    separator: ',',
    decimal: '.' ,// decimal ('.')

export default 
    name: 'CountUp',
    props: 
        // 起始值
        endVal: 
            type: Number,
            default: 0
        ,
        options: 
            type: Object,
            default: () =>  
        
    ,
    watch: 
        endVal() 
            if (this.$refs.count) 
                this.initCountUp()
            
        
    ,
    mounted() 
        this.initCountUp()
    ,
    methods: 
        initCountUp() 
            const coutOptions = Object.assign(, defaultOptions, this.options)
            const countUp = new CountUp(this.$refs.count, this.endVal, coutOptions)
            countUp.start()
        
    

</script>

3.2 调用方式

• 引入组件

import countUp from "@/components/numberAnimate";

• 注册组件

 components: 
      countUp
 ,

• 使用组件

<count-up :end-val="Number(endVal)"/>

在Vue将第三方JS库封装为组件使用

第三方JS库地址：https://github.com/inorganik/CountUp.js