数字递增特效

数字逐渐递增到指定的值

效果

属性

属性	描述	类型	默认值	可选值
from	数字起始值	Number	0	-
to	数字终止值	Number	-	-
duration	总动画时长（ms）	Number	1500	-
speed	数字变化速度	String	default	default |fast | slow

事件

事件名	描述	参数
end	动画结束触发	-

使用

<template>
  <p>
    <AnimateNumber :from="50" :to="998" />
    <div></div>
    <AnimateNumber :to="-489" :duration="2500" speed="fast" />
  </p>
</template>

<script>
import AnimateNumber from '@/components/AnimateNumber'

export default {
  components: { AnimateNumber },
}
</script>

代码

<!-- 数字递增组件 -->
<template>
  <span>{{ finalValue }}</span>
</template>

<script>
export default {
  name: 'AnimateNumber',
  props: {
    // 起始值
    from: {
      type: Number,
      default: 0,
    },
    // 终止值
    to: {
      type: Number,
      required: true,
    },
    // 起始值 - 终止值的动画时长
    duration: {
      type: Number,
      default: 1500,
    },
    // 数字变化速度，可选 default | fast | slow
    speed: {
      type: String,
      default: 'default',
    },
  },
  computed: {
    // 是否为负数
    isNegative() {
      return this.to < 0
    },
    // 小数位数
    decimal() {
      let n = String(this.to).split('.')
      return n[1] ? n[1].length : 0
    },
    // 数字变化速度
    rate() {
      if (this.speed === 'default') {
        return 70
      }
      if (this.speed === 'fast') {
        return 30
      }
      if (this.speed === 'slow') {
        return 120
      }
    },
    // 步长
    step() {
      return Math.abs(this.to) / (this.duration / this.rate)
    },
    // 最终结果
    finalValue() {
      return this.isNegative ? '-' + this.value : this.value
    },
  },
  data() {
    return {
      value: 0,
    }
  },
  mounted() {
    this.handleAnimate()
  },
  methods: {
    handleAnimate() {
      this.value = Math.abs(this.from)
      let to = Math.abs(this.to)
      let timer = setInterval(() => {
        if (this.value < to) {
          this.value = Number((this.value + this.step).toFixed(this.decimal))
        }
        if (this.value >= to) {
          this.value = to
          clearInterval(timer)
          this.$emit('end')
        }
      }, this.rate)
    },
  },
}
</script>