使用js实现一个持续的动画效果

使用js实现一个持续的动画效果
在JavaScript中实现一个持续的动画效果，通常我们会用到requestAnimationFrame或者setInterval方法。requestAnimationFrame是专门为动画设计的，它会在下一次重绘之前调用指定的回调函数，这样可以保证动画的流畅性和性能优化。相比之下，setInterval虽然也能实现类似效果，但可能会因为浏览器刷新率不一致导致动画不够平滑。

使用requestAnimationFrame

这是推荐的方法，因为它更高效，也更符合浏览器的渲染机制。

function animate() {
    // 获取当前时间
    const now = performance.now();
    // 计算动画应该进行的进度（例如，0到1之间）
    const progress = (now - startTime) / duration;
    
    // 检查是否完成动画
    if (progress < 1) {
        // 更新元素状态
        element.style.transform = `translateX(${progress * 100}px)`; // 示例：水平移动100px
        // 请求下一帧
        requestAnimationFrame(animate);
    } else {
        // 动画完成后的操作
        console.log('Animation complete!');
    }
}
 
const element = document.getElementById('myElement'); // 获取需要动画的元素
const startTime = performance.now(); // 获取开始时间
const duration = 2000; // 动画持续时间，单位毫秒
 
// 开始动画
requestAnimationFrame(animate);

使用setInterval

如果你需要兼容不支持requestAnimationFrame的旧浏览器，可以使用setInterval。但要注意，这种方法可能会导致动画不够平滑。

function animate() {
    // 获取当前时间
    const now = Date.now();
    // 计算动画应该进行的进度（例如，0到1之间）
    const progress = (now - startTime) / duration;
    
    // 检查是否完成动画
    if (progress < 1) {
        // 更新元素状态
        element.style.transform = `translateX(${progress * 100}px)`; // 示例：水平移动100px
    } else {
        // 清除定时器，动画完成后的操作
        clearInterval(interval);
        console.log('Animation complete!');
    }
}
 
const element = document.getElementById('myElement'); // 获取需要动画的元素
const startTime = Date.now(); // 获取开始时间
const duration = 2000; // 动画持续时间，单位毫秒
const interval = setInterval(animate, 10); // 每10毫秒调用一次animate函数，尽可能平滑但可能不完全准确

对于现代浏览器，推荐使用requestAnimationFrame来实现平滑的动画效果。它不仅性能更好，而且可以更好地与浏览器的绘制流程同步。如果你需要兼容老旧浏览器，可以考虑使用setInterval并结合一些额外的逻辑来尽量减少误差和提升性能。不过，最好的做法是尽可能地让你的网站或应用支持现代浏览器。