使用gasp实现一个大屏跳动数字的组件

GSAP官网网址：gsap.com/

快速理解基本用法可以

参考文章1

参考文章2

- 以下是本组件的效果预览

封装的组件代码

export default {
  props: {
    // 数值
    number: {
      type: [Number, String],
      default: '-',
    },
    // 小数点位数
    decimal: {
      type: [Number, String],
      default: 0,
    },
    // 持续时间
    duration: {
      type: [Number, String],
      default: 5,
    },
    // 间隔 单位：s
    interval: {
      type: Number,
      default: 10,
    },
  },
  data() {
    return {
      tweenedNumber: 0,
    }
  },
  created() {},
  computed: {
    animatedNumber() {
      return this.isNumber && !isNaN(+this.tweenedNumber)
        ? (+this.tweenedNumber).toFixed(this.decimal)
        : '-'
    },
    isNumber() {
      return !isNaN(+this.number)
    },
  },
  watch: {
    // 数值变化
    number() {
      this.runAnimation()
    },
  },
  beforeDestory() {
    if (this.timer) this.timer()
  },
  mounted() {
    this.runAnimation()
    this.timer = setInterval(() => {
      this.tweenedNumber = 0
      gsap.to(this.$data, {
        duration: this.duration,
        tweenedNumber: +this.number,
      })
    }, this.interval * 1000)
  },
  methods: {
    runAnimation() {
      if (!this.isNumber) return
      gsap.to(this.$data, {
        duration: this.duration,
        tweenedNumber: +this.number,
      })
    },
  },
}

<span class="jump_number">
	{{ animatedNumber }}
	<slot></slot>
</span>

组件使用

<jump-number :number="num" decimal="1" duration="1">件</jump-number>