介紹:
? ? ? ? 當數字變化時，只改變變化的數字位，其余的不變，可以遞增、遞減、驟變、負數也可以，但是樣式要根據具體的項目需求去改；
效果1、增加數字：
效果2、減少數字：
使用方法：
<template><AnimatNumber :data="data" />
</template><script setup>
// 引入動畫
import AnimatNumber from "./components/AnimatNumber.vue";const data = ref(0);setInterval(() => {data.value -= 30;
}, 2000);
</script><style lang="scss"></style>組件代碼(vue3)：
<template><div class="num-wrap"><div v-for="(item, index) in computedData" :key="index" class="num-item"><div class="num-inner" ref="numInnerRef"><div class="prev">{{ item.newValue }}</div><div class="current">{{ item.oldValue }}</div><div class="next">{{ item.oldValue }}</div></div></div></div>
</template><script setup>
// 數字滾動效果
import { onBeforeUnmount, watch, ref, nextTick } from "vue";const props = defineProps({// 傳進來的數據 number、string的number都可以data: {type: [Number, String],default: 999},// 動畫持續時間 number、string的number都可以 最低1000msduration: {type: [Number, String],default: 500},// 基本的高度 所有的動畫移動距離都是和這個有關的，確保這個值和css的$height一樣，否則有問題baseHeight: {type: Number,default: 50}
});const numInnerRef = ref();// raf演示器
const setTimeoutPolyfill = (func, delay) => {let startTime = Date.now();let rafId;function animationFrameCallback() {const currentTime = Date.now();const timeElapsed = currentTime - startTime;if (timeElapsed >= delay) {func();} else {rafId = requestAnimationFrame(animationFrameCallback);}}rafId = requestAnimationFrame(animationFrameCallback);// 返回一個取消函數return () => cancelAnimationFrame(rafId);
};/*
推演公式新 舊1001 -> 10001002 -> 10011003 -> 10021004 -> 10031005 -> 1004
*/const newArr = ref([]);
const oldArr = ref([]);
const computedData = ref(props.data.toString().split("").map((item, index) => ({ index, oldValue: item, newValue: item }))
);
const lock = ref(false);
// 延時器
const timer = ref({timerOne: null,timerTwo: null
});watch(() => props.data,(newVal, oldVal) => {if (`${newVal}`.length !== `${oldVal}`.length) {lock.value = false;}if (!lock.value) {computedData.value = props.data.toString().split("").map((item, index) => ({ index, oldValue: item, newValue: item }));lock.value = true;}newArr.value = newVal.toString().split("").map((item, index) => ({ index, value: item }));oldArr.value = oldVal.toString().split("").map((item, index) => ({ index, value: item }));/*如果newArr的長度大于于oldArr的長度，則需要給oldArr從前面增加newArr.length - oldArr.length的長度的{ index, oldValue: '-', newValue: newValueItem }, 同時更新oldArr沒有新增的index*/// 新值和老值差const differLength = newArr.value.length - oldArr.value.length;if (newArr.value.length > oldArr.value.length) {for (let i = 0; i < differLength; i++) {oldArr.value.unshift({ index: i, value: "-" });}// 重新設置indexoldArr.value.forEach((item, index) => (item.index = index));}// 改變的數字的索引集合const indexArr = [];newArr.value.forEach(item => {if (item.value !== oldArr.value[item.index].value) {indexArr.push(item.index);}});nextTick(() => {indexArr.forEach(diffIndex => {numInnerRef.value[diffIndex].children[0].innerHTML =newArr.value[diffIndex].value;numInnerRef.value[diffIndex].children[0].animate([{ top: `${-props.baseHeight}px` }, { top: 0 }],{duration: props.duration,fill: "forwards"});numInnerRef.value[diffIndex].children[1].animate([{ top: "0" }, { top: `${props.baseHeight}px` }],{duration: props.duration,fill: "forwards"});timer.value.timerOne = setTimeoutPolyfill(() => {numInnerRef.value[diffIndex].children[2].innerHTML =oldArr.value[diffIndex].value;timer.value.timerTwo = setTimeoutPolyfill(() => {numInnerRef.value[diffIndex].children[1].innerHTML =newArr.value[diffIndex].value;}, props.duration);numInnerRef.value[diffIndex].children[2].style.top = `${-props.baseHeight}px`;}, props.duration);});});},{ deep: true }
);// 卸載
onBeforeUnmount(() => {timer.value.timerOne && timer.value.timerOne();timer.value.timerTwo && timer.value.timerTwo();
});
</script><style lang="scss" scoped>
$width: 50px;
$height: 50px;
.num-wrap {margin-top: 200px;display: flex;gap: 10px;.num-item {width: $width;height: $height;border: 1px solid #000;border-radius: 8px;font-size: 20px;font-weight: 600;position: relative;overflow: hidden;color: #0dfbff;background: rgba(0, 13, 23, 0.5);.num-inner {position: relative;width: $width;height: $height;}.prev,.current,.next {width: $width;height: $height;text-align: center;line-height: $width;position: absolute;}.prev {top: -$height;}.current {top: 0;}.next {top: $height;}}
}
</style>
)
