GSAP数字加载效果

实现以上效果，只需要简单的利用 GSAP 就能实现，这里有2种实现方法。

其原理都是借助于 gsap ,但是一种是通过改变原始值，一种是通过改变innerHTML(未改变原始值)

方式一： 通过动态更新proxy.value的值，来实现数字的加载效果

const loadNumber = (value) => {
  const proxy = { value: 0 }
  gsap.to(proxy, {
    duration: 2,
    ease: 'power2.out',
    value: value,
    onUpdate: () => {
      // 向上取整，会改变原始传入值
      number.value = Math.ceil(proxy.value)
    },
    onComplete: () => {
      // 改变了number.value的值
      console.log(number.value)
    }
  })
}

方式二： 通过获取dom元素，控制innerHTML属性，来实现数字的加载效果

const loadNumber2 = (value) => {
  // 获取要改变的dom元素
  const proxy = document.querySelector('.number-text-2')
  gsap.to(proxy, {
    duration: 2,
    ease: 'power2.out',
    innerHTML: value,
    onUpdate: () => {
      // 保留一位小数
      proxy.innerHTML = Math.ceil(proxy.innerHTML * 10) / 10
    },
    onComplete: () => {
      // 没有改变number2.value的值
      console.log(number2.value)
    }
  })
}

以上是gsap3.0最新的实现方式，之前版本如何实现这种效果，可参考此篇文章。

当然有兴趣的话，你也可以通过 animejs 来实现，其实原理差不多，更加推荐学习用gsap哈。