vue实现数字动态滚动
实现数字动态滚动的方案
在Vue中实现数字动态滚动效果，可以通过多种方式实现。以下是几种常见的方法：
使用CSS动画
通过CSS的transition或animation属性实现数字变化时的平滑过渡效果。这种方法简单但控制粒度较粗。
<template>
<div class="animated-number">{{ currentValue }}</div>
</template>
<script>
export default {
data() {
return {
currentValue: 0,
targetValue: 100
}
},
mounted() {
this.animateNumber()
},
methods: {
animateNumber() {
const duration = 2000 // 动画持续时间
const startTime = performance.now()
const updateValue = (timestamp) => {
const elapsed = timestamp - startTime
const progress = Math.min(elapsed / duration, 1)
this.currentValue = Math.floor(progress * this.targetValue)
if (progress < 1) {
requestAnimationFrame(updateValue)
}
}
requestAnimationFrame(updateValue)
}
}
}
</script>
<style>
.animated-number {
transition: all 1s ease-out;
}
</style>使用第三方库
Vue-count-to是一个专门用于数字动画的Vue组件，提供更多配置选项。
安装：
npm install vue-count-to使用示例：
<template>
<countTo :startVal="0" :endVal="1000" :duration="3000"></countTo>
</template>
<script>
import countTo from 'vue-count-to'
export default {
components: { countTo }
}
</script>自定义动画函数
对于更复杂的动画需求，可以创建自定义动画函数，结合requestAnimationFrame实现。
<template>
<div>{{ animatedValue }}</div>
</template>
<script>
export default {
data() {
return {
startValue: 0,
endValue: 1000,
duration: 2000,
animatedValue: 0
}
},
mounted() {
this.startAnimation()
},
methods: {
startAnimation() {
let startTimestamp = null
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp
const progress = Math.min((timestamp - startTimestamp) / this.duration, 1)
this.animatedValue = Math.floor(
this.startValue + progress * (this.endValue - this.startValue)
)
if (progress < 1) {
requestAnimationFrame(step)
}
}
requestAnimationFrame(step)
}
}
}
</script>实现细节优化
缓动函数应用
为动画添加缓动效果可以使滚动更自然。常用的缓动函数包括easeInOutQuad、easeOutCubic等。
// 缓动函数示例
function easeOutCubic(t) {
return 1 - Math.pow(1 - t, 3)
}
// 在动画函数中使用
const easedProgress = easeOutCubic(progress)
this.animatedValue = Math.floor(
this.startValue + easedProgress * (this.endValue - this.startValue)
)格式化显示
对于大数字，可以添加千位分隔符或货币符号等格式化显示。
methods: {
formatNumber(value) {
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
}响应式更新
当目标值变化时自动触发新动画，可以添加watch监听。
watch: {
endValue(newVal) {
this.startValue = this.animatedValue
this.endValue = newVal
this.startAnimation()
}
}性能考虑
减少DOM操作
避免在动画过程中频繁操作DOM，使用虚拟DOM的特性让Vue批量处理更新。
使用will-change
对动画元素应用CSS will-change属性，提示浏览器优化。
.animated-number {
will-change: contents;
}适时停止动画
在组件销毁前取消未完成的动画帧请求。
beforeDestroy() {
cancelAnimationFrame(this.animationFrameId)
}以上方法可以根据具体需求选择或组合使用，实现从简单到复杂的数字滚动效果。
