js实现动画加载
使用 CSS 动画实现基础加载效果
通过 CSS @keyframes 定义动画，结合 animation 属性实现平滑的加载动画。以下是一个旋转加载动画的示例：
.loader {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}在 HTML 中插入一个 div 元素并应用此样式：
<div class="loader"></div>使用 JavaScript 控制动画启停
通过 classList 动态添加或移除动画类，实现动画的手动控制。例如：
const loader = document.querySelector('.loader');
// 启动动画
loader.classList.add('spin-animation');
// 停止动画
loader.classList.remove('spin-animation');使用 requestAnimationFrame 实现高性能动画
适用于需要复杂计算的动画场景。以下示例实现一个平滑移动的方块：
const box = document.getElementById('box');
let position = 0;
function animate() {
position += 1;
box.style.transform = `translateX(${position}px)`;
if (position < 200) {
requestAnimationFrame(animate);
}
}
animate();结合 SVG 和 JavaScript 实现高级加载动画
通过动态修改 SVG 属性实现更灵活的动画效果。例如：
const svgPath = document.querySelector('.svg-loader path');
let offset = 0;
function updatePath() {
offset += 0.05;
svgPath.style.strokeDashoffset = offset;
requestAnimationFrame(updatePath);
}
updatePath();使用第三方库（如 GSAP）简化复杂动画
GSAP 提供更强大的动画控制能力。示例代码：
gsap.to(".loader", {
rotation: 360,
duration: 2,
repeat: -1,
ease: "linear"
});注意事项
- 性能优化：避免频繁操作 DOM，优先使用 CSS 硬件加速属性（如
transform和opacity）。 - 兼容性：使用
window.requestAnimationFrame的 polyfill 确保旧浏览器支持。 - 可访问性：为加载动画添加
aria-busy="true"属性，辅助设备可识别加载状态。
