编辑“︁JavaScript DOM动画”︁

{{DISPLAYTITLE:JavaScript DOM动画}}

'''JavaScript DOM动画'''是指通过操作[[文档对象模型 (DOM)|DOM]]元素，使用JavaScript动态改变元素的样式或位置，从而在网页上创建视觉动画效果的技术。这种技术广泛应用于交互式网页、游戏、数据可视化等领域。

== 概述 ==
DOM动画的核心原理是通过JavaScript周期性修改DOM元素的CSS属性（如`left`、`top`、`opacity`、`transform`等），利用浏览器的渲染机制产生连续变化的视觉效果。与纯CSS动画相比，JavaScript动画提供更精细的控制能力，可以响应复杂逻辑或用户交互。

=== 关键概念 ===
* '''帧(Frame)'''：动画的最小时间单位，通常以每秒60帧（60FPS）为目标
* '''时间控制'''：通过`setInterval`、`setTimeout`或`requestAnimationFrame`实现
* '''缓动函数(Easing)'''：控制动画速度变化规律的数学函数
* '''性能考量'''：避免强制同步布局(reflow)和过度绘制

== 基础实现方法 ==
=== 使用定时器 ===
传统方法使用`setInterval`实现简单动画：

<syntaxhighlight lang="javascript">
// 移动一个方块从左侧到右侧
const box = document.getElementById('animatedBox');
let position = 0;
const intervalId = setInterval(() => {
  position += 5;
  box.style.left = position + 'px';
  if (position > 300) clearInterval(intervalId);
}, 16); // ≈60FPS
</syntaxhighlight>

'''问题'''：这种方法可能导致卡顿或跳帧，因为无法与浏览器刷新同步。

=== 使用requestAnimationFrame ===
现代浏览器推荐使用`requestAnimationFrame`，它能保证动画与浏览器刷新率同步：

<syntaxhighlight lang="javascript">
function animate() {
  const box = document.getElementById('animatedBox');
  let start = null;

  function step(timestamp) {
    if (!start) start = timestamp;
    const progress = timestamp - start;
    const newPosition = Math.min(progress / 10, 300);
    box.style.transform = `translateX(${newPosition}px)`;
    if (progress < 3000) { // 动画持续3秒
      window.requestAnimationFrame(step);
    }
  }
  window.requestAnimationFrame(step);
}
</syntaxhighlight>

== 高级动画技术 ==
=== CSS过渡与JavaScript结合 ===
通过JavaScript触发CSS过渡效果：

<syntaxhighlight lang="javascript">
const element = document.getElementById('transitionElement');
element.style.transition = 'transform 2s ease-in-out';
element.style.transform = 'rotate(180deg)';
</syntaxhighlight>

=== Web Animations API ===
现代浏览器提供的原生动画API：

<syntaxhighlight lang="javascript">
const element = document.getElementById('animatedElement');
element.animate([
  { transform: 'translateX(0)' },
  { transform: 'translateX(300px)' }
], {
  duration: 1000,
  iterations: Infinity,
  direction: 'alternate'
});
</syntaxhighlight>

== 缓动函数 ==
缓动函数决定动画过程中速度如何变化。常见类型：

<mermaid>
graph LR
    A[缓动函数] --> B[线性]
    A --> C[缓入]
    A --> D[缓出]
    A --> E[缓入缓出]
</mermaid>

数学实现示例：
<math>
\text{easeInOutQuad}(t) = \begin{cases} 
2t^2 & \text{当 } 0 \leq t < 0.5 \\ 
-1+(4-2t)t & \text{当 } 0.5 \leq t \leq 1 
\end{cases}
</math>

JavaScript实现：
<syntaxhighlight lang="javascript">
function easeInOutQuad(t) {
  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}
</syntaxhighlight>

== 性能优化 ==
* 优先使用`transform`和`opacity`属性（触发合成层）
* 避免在动画中修改`width`、`height`、`margin`等触发布局的属性
* 使用`will-change`提示浏览器优化
* 对复杂动画考虑使用WebGL或Canvas

== 实际案例 ==
=== 下拉菜单动画 ===
<syntaxhighlight lang="javascript">
function toggleMenu() {
  const menu = document.getElementById('dropdownMenu');
  const isOpen = menu.classList.contains('open');
  
  if (isOpen) {
    menu.style.maxHeight = '0';
    menu.classList.remove('open');
  } else {
    menu.style.maxHeight = menu.scrollHeight + 'px';
    menu.classList.add('open');
  }
}
</syntaxhighlight>

=== 无限滚动背景 ===
<syntaxhighlight lang="javascript">
function createScrollingBackground() {
  const background = document.getElementById('scrollingBg');
  let position = 0;
  
  function animate() {
    position -= 1;
    background.style.backgroundPosition = `${position}px 0`;
    requestAnimationFrame(animate);
  }
  animate();
}
</syntaxhighlight>

== 常见问题与解决方案 ==
{| class="wikitable"
|-
! 问题 !! 解决方案
|-
| 动画卡顿 || 检查是否触发重排，改用transform/opacity
|-
| 内存泄漏 || 清除未使用的动画引用
|-
| 跨浏览器兼容性 || 使用polyfill或特性检测
|-
| 移动端性能差 || 减少同时动画元素数量
|}

== 延伸学习 ==
* 使用GSAP等专业动画库
* 研究Canvas/SVG动画
* 学习物理引擎集成（如Matter.js）
* 探索WebGL三维动画

通过掌握DOM动画技术，开发者可以创建丰富、流畅的用户界面体验，同时保持代码的可维护性和性能。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript DOM]]