使用setInterval或requestAnimationFrame可实现JavaScript动画。1. setInterval通过固定时间间隔更新元素位置，适合初学者，需配合clearInterval控制结束；2. requestAnimationFrame根据屏幕刷新率优化执行，动画更流畅且性能更优；3. 动画原理为持续修改元素样式属性（如left、opacity），需预先设置元素定位模式；4. 常见应用包括平移、淡入淡出等效果；5. 掌握定时器与样式操作即可实现基础动画，推荐优先使用requestAnimationFrame。
JavaScript 中实现简单动画效果，常用的方法是结合定时器 setInterval 或 requestAnimationFrame 来不断更新元素的位置或样式，从而形成视觉上的动画。下面介绍几种实用的实现方式。
使用 setInterval 实现移动动画
setInterval 可以按固定时间间隔执行一段代码，适合初学者理解动画原理。
例如：让一个 div 元素从左向右平移：
const box = document.getElementById('box');
let position = 0;
const timer = setInterval(() => {
position += 5;
box.style.left = position + 'px';
if (position >= 300) {
clearInterval(timer); // 到达目标位置后停止
}
}, 30);
注意：要提前设置 #box 的 CSS 样式为 position: relative 或 absolute，才能通过 left 属性控制位置。
立即学习“Java免费学习笔记（深入）”；
使用 requestAnimationFrame 实现更流畅动画
相比 setInterval，requestAnimationFrame 是浏览器专门为动画设计的 API，能根据屏幕刷新率优化执行时机，动画更流畅且节省性能。
改写上面的例子：
const box = document.getElementById('box');
let position = 0;
function animate() {
position += 5;
box.style.left = position + 'px';
if (position < 300) {
requestAnimationFrame(animate);
}
}
animate(); // 启动动画
这种方式不会出现卡顿，推荐用于实际项目中的动画实现。
实现淡入淡出等其他效果
除了位移，还可以控制 opacity 实现渐显/渐隐效果：
let opacity = 0;
const fadeBox = document.getElementById('fadeBox');
const fadeIn = setInterval(() => {
opacity += 0.05;
fadeBox.style.opacity = opacity;
if (opacity >= 1) {
clearInterval(fadeIn);
}
}, 50);
同样适用于透明度、尺寸、颜色过渡等属性变化。
基本上就这些。掌握定时器和样式动态修改，就能用原生 JavaScript 实现基础动画效果。requestAnimationFrame 更优，setInterval 更易懂，按需选择即可。
