vue实现数字动态滚动

数字动态滚动实现方法

在Vue中实现数字动态滚动效果，可以通过以下方式完成：

使用transition组件结合CSS动画

通过Vue的transition组件和CSS的transition或animation属性实现平滑的数字变化效果。

<template>
  <div class="number-counter">
    <transition name="slide-up">
      <span :key="currentNumber">{{ currentNumber }}</span>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentNumber: 0,
      targetNumber: 1000
    }
  },
  mounted() {
    this.animateNumber()
  },
  methods: {
    animateNumber() {
      const duration = 2000 // 动画持续时间(ms)
      const startTime = performance.now()

      const updateNumber = (timestamp) => {
        const elapsed = timestamp - startTime
        const progress = Math.min(elapsed / duration, 1)
        this.currentNumber = Math.floor(progress * this.targetNumber)

        if (progress < 1) {
          requestAnimationFrame(updateNumber)
        }
      }

      requestAnimationFrame(updateNumber)
    }
  }
}
</script>

<style>
.slide-up-enter-active, .slide-up-leave-active {
  transition: all 0.5s ease;
}
.slide-up-enter, .slide-up-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
</style>

使用第三方库vue-countup

vue-countup是一个专门用于数字滚动动画的Vue组件，提供更多配置选项。

安装依赖：

npm install vue-countup

使用示例：

<template>
  <count-up 
    :start-val="0" 
    :end-val="targetNumber" 
    :duration="2.5"
    :options="options"
  />
</template>

<script>
import CountUp from 'vue-countup'

export default {
  components: { CountUp },
  data() {
    return {
      targetNumber: 1000,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
        prefix: '',
        suffix: ''
      }
    }
  }
}
</script>

自定义动画函数实现

创建一个可重用的数字动画函数，支持更多自定义参数。

<template>
  <div>{{ animatedNumber }}</div>
</template>

<script>
export default {
  data() {
    return {
      startNumber: 0,
      endNumber: 1000,
      duration: 2000,
      animatedNumber: 0
    }
  },
  mounted() {
    this.animateValue(this.startNumber, this.endNumber, this.duration)
  },
  methods: {
    animateValue(start, end, duration) {
      let startTimestamp = null
      const step = (timestamp) => {
        if (!startTimestamp) startTimestamp = timestamp
        const progress = Math.min((timestamp - startTimestamp) / duration, 1)
        this.animatedNumber = Math.floor(progress * (end - start) + start)
        if (progress < 1) {
          window.requestAnimationFrame(step)
        }
      }
      window.requestAnimationFrame(step)
    }
  }
}
</script>

使用GSAP实现高级动画

对于更复杂的动画效果，可以使用GSAP动画库。

安装GSAP：

npm install gsap

实现代码：

<template>
  <div ref="numberElement">{{ currentNumber }}</div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  data() {
    return {
      currentNumber: 0
    }
  },
  mounted() {
    this.animateWithGSAP(1000, 2)
  },
  methods: {
    animateWithGSAP(targetValue, duration) {
      gsap.to(this, {
        duration,
        currentNumber: targetValue,
        ease: "power1.out",
        onUpdate: () => {
          this.currentNumber = Math.floor(this.currentNumber)
        }
      })
    }
  }
}
</script>

实现带格式化功能的数字滚动

在数字滚动的同时添加格式化功能，如千位分隔符。

<template>
  <div>{{ formattedNumber }}</div>
</template>

<script>
export default {
  data() {
    return {
      currentNumber: 0,
      targetNumber: 1234567
    }
  },
  computed: {
    formattedNumber() {
      return this.currentNumber.toLocaleString()
    }
  },
  mounted() {
    this.animateNumber()
  },
  methods: {
    animateNumber() {
      const duration = 3000
      const startTime = performance.now()

      const update = (timestamp) => {
        const elapsed = timestamp - startTime
        const progress = Math.min(elapsed / duration, 1)
        this.currentNumber = Math.floor(progress * this.targetNumber)

        if (progress < 1) {
          requestAnimationFrame(update)
        }
      }

      requestAnimationFrame(update)
    }
  }
}
</script>

以上方法可根据具体需求选择使用，从简单到复杂提供了不同级别的数字滚动动画实现方案。