如何实现环形进度条进入视图时触发动画？

现有JavaScript代码在页面加载时自动运行环形进度条动画，希望修改为当进度条元素进入视口时才触发该动画，具体实现方法如下：

核心思路 #

使用Intersection Observer API监听进度条元素的可见性，当元素进入视口时再执行动画逻辑，同时确保动画只触发一次，避免重复执行。

修改后的代码 #

// 获取目标元素
let progressBar = document.querySelector(".circular-progress");
let valueContainer = document.querySelector(".value-container");

let progressValue = 0;
let progressEndValue = 65;
let speed = 50;
let animationTriggered = false; // 标记动画是否已触发

// 封装动画逻辑为函数
function startProgressAnimation() {
    if (animationTriggered) return; // 已触发则直接返回
    animationTriggered = true;
    
    let progress = setInterval(() => {
        progressValue++;
        valueContainer.textContent = `${progressValue}%`;
        progressBar.style.background = `conic-gradient(
            #FBDA9D ${progressValue * 3.6}deg,
            #683279 ${progressValue * 3.6}deg
        )`;
        if (progressValue === progressEndValue) {
            clearInterval(progress);
        }
    }, speed);
}

// 创建Intersection Observer实例
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        // 当元素进入视口时触发动画
        if (entry.isIntersecting) {
            startProgressAnimation();
            // 动画触发后取消监听，避免重复执行
            observer.unobserve(entry.target);
        }
    });
}, {
    threshold: 0.1 // 元素10%进入视口时触发，可按需调整
});

// 开始监听进度条元素
if (progressBar) {
    observer.observe(progressBar);
}

代码说明 #

• animationTriggered变量用于标记动画是否已经执行，防止元素反复进出视口时重复触发。
• threshold参数可自定义，设为0.1表示元素有10%进入视口就触发，设为1则表示元素完全进入视口才触发。
• 动画启动后调用unobserve取消监听，避免不必要的性能消耗。

内容的提问来源于stack exchange，提问作者Prince Zapanta