yunshangxie/tuniao-ui/components/tn-count-to/tn-count-to.vue

<template>
  <view
    class="tn-count-num-class tn-count-num"
    :class="[fontColorClass]"
    :style="{
      fontSize: fontSizeStyle || '50rpx',
      fontWeight: bold ? 'bold' : 'normal',
      color: fontColorStyle || '#080808'
    }"
  >
    {{ displayValue }}
  </view>
</template>

<script>
  import componentsColorMixin from '../../libs/mixin/components_color.js'
  export default {
    name: 'tn-count-to',
    mixins: [componentsColorMixin],
    props: {
      // 开始的数值，默认为0
      startVal: {
        type: Number,
        default: 0
      },
      // 结束目标数值
      endVal: {
        type: Number,
        default: 0,
        required: true
      },
      // 是否自动开始
      autoplay: {
        type: Boolean,
        default: true
      },
      // 滚动到目标值的持续时间，单位为毫秒
      duration: {
        type: Number,
        default: 2000
      },
      // 是否在即将结束的时候使用缓慢滚动的效果
      useEasing: {
        type: Boolean,
        default: true
      },
      // 显示的小数位数
      decimals: {
        type: Number,
        default: 0
      },
      // 十进制的分割符
      decimalSeparator: {
        type: String,
        default: '.'
      },
      // 千分位的分隔符
      // 类似金额的分割(￥23,321.05中的",")
      thousandthsSeparator: {
        type: String,
        default: ''
      },
      // 是否显示加粗字体
      bold: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      countDown() {
        return this.startVal > this.endVal
      }
    },
    data() {
      return {
        localStartVal: this.startVal,
        localDuration: this.duration,
        // 显示的数值
        displayValue: this.formatNumber(this.startVal),
        // 打印的数值
        printValue: null,
        // 是否暂停
        paused: false,
        // 开始时间戳
        startTime: null,
        // 停留时间戳
        remainingTime: null,
        // 当前时间戳
        timestamp: null,
        // 上一次的时间戳
        lastTime: 0,
        rAF: null
      }
    },
    watch: {
      startVal() {
        this.autoplay && this.start()
      },
      endVal() {
        this.autoplay && this.start()
      }
    },
    mounted() {
      this.autoplay && this.start()
    },
    methods: {
      // 开始滚动
      start() {
        this.localStartVal = this.startVal
        this.startTime = null
        this.localDuration = this.duration
        this.paused = false
        this.rAF = this.requestAnimationFrame(this.count)
      },
      // 重新开始
      reStart() {
        if (this.paused) {
          this.resume()
          this.paused = false
        } else {
          this.stop()
          this.paused = true
        }
      },
      // 停止
      stop() {
        this.cancelAnimationFrame(this.rAF)
      },
      // 恢复
      resume() {
        this.startTime = null
        this.localDuration = this.remainingTime
        this.localStartVal = this.printValue
        this.requestAnimationFrame(this.count)
      },
      // 重置
      reset() {
        this.startTime = null
        this.cnacelAnimationFrame(this.rAF)
        this.displayValue = this.formatNumber(this.startVal)
      },
      // 销毁组件
      destroyed() {
        this.cancelAnimationFrame(this.rAF)
      },
      // 累加时间
      count(timestamp) {
        if (!this.startTime) this.startTime = timestamp
        this.timestamp = timestamp
        const progress = timestamp - this.startTime
        this.remainingTime = this.localDuration - progress
        if (this.useEasing) {
          if (this.countDown) {
            this.printValue = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration)
          } {
            this.printValue = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration)
          }
        } else {
          if (this.countDown) {
            this.printValue = this.localStartVal - (this.localStartVal - this.endVal) * (progress / this.localDuration)
          } else {
            this.printValue = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration)
          }
        }
        if (this.countDown) {
          this.printValue = this.printValue < this.endVal ? this.endVal : this.printValue
        } else {
          this.printValue = this.printValue > this.endVal ? this.endVal : this.printValue
        }
        
        this.displayValue = this.formatNumber(this.printValue)
        if (progress < this.localDuration) {
          this.rAF = this.requestAnimationFrame(this.count)
        } else {
          this.$emit('end')
        }
      },
      // 缓动时间计算
      easingFn(t, b, c, d) {
        return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b
      },
      // 请求帧动画
      requestAnimationFrame(cb) {
        const currentTime = new Date().getTime()
        // 为了使setTimteout的尽可能的接近每秒60帧的效果
        const timeToCall = Math.max(0, 16 - (currentTime - this.lastTime))
        const timerId = setTimeout(() => {
          cb && cb(currentTime + timeToCall)
        }, timeToCall)
        this.lastTime = currentTime + timeToCall
        return timerId
      },
      // 清除帧动画
      clearAnimationFrame(timerId) {
        clearTimeout(timerId)
      },
      // 格式化数值
      formatNumber(number) {
        const reg = /(\d+)(\d{3})/
        number = Number(number)
        number = number.toFixed(Number(this.decimals))
        number += ''
        const numberArray = number.split('.')
        let num1 = numberArray[0]
        const num2 = numberArray.length > 1 ? this.decimalSeparator + numberArray[1] : ''
        
        if (this.thousandthsSeparator && !this.isNumber(this.thousandthsSeparator)) {
          while(reg.test(num1)) {
            num1 = num1.replace(reg, '$1' + this.thousandthsSeparator + '$2')
          }
        }
        return num1 + num2
      },
      // 判断是否为数字
      isNumber(val) {
        return !isNaN(parseFloat(val))
      }
    }
  }
</script>

<style lang="scss" scoped>
  
  .tn-count-num {
    /* #ifndef APP-NVUE */
    display: inline-flex;
    /* #endif */
    text-align: center;
    line-height: 1;
  }
</style>