vue3：el-progress的圆形无线滚动，心跳、呼吸效果，加载中的效果
const dynamicPercentage = ref(0) // 初始值
let animationId = null
// 模拟呼吸/心跳波形
const breatheWave = () => {
const t = Date.now() / 1000
const percent = Math.sin(t * 1) * 35 + 45
dynamicPercentage.value = Math.round(percent)
animationId = requestAnimationFrame(breatheWave)
}
watch(
() => useFile.compressingOrDownloading,
(newValue) => {
if (newValue === 0) {
dynamicPercentage.value = 100
if (animationId) {
cancelAnimationFrame(animationId)
animationId = null
}
} else if (newValue > 0) {
if (!animationId) {
breatheWave()
}
}
},
)
onMounted(() => {
if (useFile.compressingOrDownloading > 0) {
breatheWave()
}
})
onUnmounted(() => {
if (animationId) {
cancelAnimationFrame(animationId)
}
})