JavaScript动画通过操作DOM与事件监听实现动态效果，需掌握定时器、CSS过渡及requestAnimationFrame优化性能，结合用户交互触发平滑动画，提升页面响应性与用户体验。
JavaScript动画和交互效果能让网页更生动，提升用户体验。通过操作DOM元素的样式、结合事件监听，可以实现各种动态视觉效果。关键在于掌握定时器控制、CSS样式变化以及现代浏览器提供的动画API。
使用定时器实现基础动画
JavaScript提供 setInterval 和 setTimeout 来控制动画帧。适合简单移动或渐变效果。
- setInterval 每隔固定时间执行一次，常用于持续动画，如轮播图自动切换。
- setTimeout 可递归调用实现更灵活的动画流程，比如淡入淡出。
- 注意：频繁操作DOM会影响性能，建议控制间隔时间（通常设为16ms左右，接近60fps）。
利用requestAnimationFrame优化动画
相比定时器，requestAnimationFrame 更适合动画渲染。它会在浏览器下一次重绘前调用回调函数，更流畅且节省资源。
- 自动适配屏幕刷新率，避免卡顿或掉帧。
- 页面不可见时会暂停，节省CPU和电量。
- 写法上采用递归调用自身，控制动画进度。
常见交互动画示例
结合用户行为触发动画，增强页面响应感。
立即学习“Java免费学习笔记（深入）”；
- 鼠标悬停效果：通过 mouseenter/mouseleave 事件改变元素透明度或位置。
- 点击展开/收起：动态修改元素高度或max-height实现平滑过渡。
- 滚动触发动画：监听页面 scroll 事件，当元素进入视口时添加动画类名。
结合CSS transition与JavaScript控制
实际开发中，推荐用CSS定义过渡效果，JavaScript负责触发状态变更。
- 在CSS中设置 transition 属性，如 transition: all 0.3s ease。
- JavaScript只负责添加或移除class，让浏览器自然完成动画过程。
- 这种方式解耦逻辑与样式，代码更清晰，性能也更好。
基本上就这些。掌握核心方法后，可以根据需求组合出丰富交互效果。不复杂但容易忽略细节，比如清除定时器、兼容性处理等。
