编辑“︁CSS动画与JavaScript”︁（章节）

= CSS动画与JavaScript =

CSS动画与JavaScript的结合为现代网页开发提供了强大的动态效果控制能力。本教程将系统讲解两者协同工作的原理、实现方式及实际应用场景。

== 核心概念 ==

=== CSS动画基础 ===
CSS动画通过<code>@keyframes</code>规则和<code>animation</code>属性实现，例如：

<syntaxhighlight lang="css">
@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.box {
  animation: slideIn 1s ease-out;
}
</syntaxhighlight>

=== JavaScript动画控制 ===
JavaScript可以通过DOM API动态修改CSS动画属性：

<syntaxhighlight lang="javascript">
const box = document.querySelector('.box');
box.style.animation = 'slideIn 2s ease-in-out';
</syntaxhighlight>

== 深度集成方案 ==

=== 事件监听 ===
CSS动画事件可通过JavaScript监听：

<mermaid>
sequenceDiagram
    participant JS
    participant CSS
    JS->>CSS: 添加animationstart监听
    CSS->>JS: 触发animationstart事件
    JS->>CSS: 添加animationend监听
    CSS->>JS: 触发animationend事件
</mermaid>

<syntaxhighlight lang="javascript">
element.addEventListener('animationstart', (e) => {
  console.log(`动画开始: ${e.animationName}`);
});

element.addEventListener('animationend', (e) => {
  console.log(`动画结束: ${e.animationName}`);
});
</syntaxhighlight>

=== 性能优化技术 ===
使用<code>requestAnimationFrame</code>实现高效动画循环：

<syntaxhighlight lang="javascript">
function animate() {
  // 计算新位置
  element.style.transform = `translateX(${progress}px)`;
  
  if (progress < 100) {
    requestAnimationFrame(animate);
  }
}
requestAnimationFrame(animate);
</syntaxhighlight>

== 实际应用案例 ==

=== 交互式动画控制 ===
结合CSS变量实现动态参数传递：

<syntaxhighlight lang="html">
<style>
  .progress-bar {
    --progress: 0;
    width: calc(var(--progress) * 1%);
  }
</style>

<script>
  const slider = document.getElementById('slider');
  const bar = document.querySelector('.progress-bar');
  
  slider.addEventListener('input', () => {
    bar.style.setProperty('--progress', slider.value);
  });
</script>
</syntaxhighlight>

=== 复杂动画序列 ===
使用JavaScript编排多个CSS动画：

<syntaxhighlight lang="javascript">
async function playAnimationSequence() {
  element1.style.animation = 'fadeIn 0.5s';
  await waitForAnimation(element1);
  
  element2.style.animation = 'slideUp 0.3s';
  await waitForAnimation(element2);
}

function waitForAnimation(element) {
  return new Promise(resolve => {
    element.addEventListener('animationend', resolve, { once: true });
  });
}
</syntaxhighlight>

== 数学原理 ==
贝塞尔曲线在动画时序中的应用：

<math>
B(t) = P_0(1-t)^3 + 3P_1t(1-t)^2 + 3P_2t^2(1-t) + P_3t^3
</math>

其中<math>P_0</math>到<math>P_3</math>为控制点，<math>t</math>∈[0,1]

== 性能对比表 ==
{| class="wikitable"
|+ 动画技术性能比较
! 技术 !! 适用场景 !! GPU加速 !! 主线程负载
|-
| CSS Transition | 简单属性变化 | 是 | 低
|-
| CSS Animation | 复杂关键帧动画 | 是 | 中
|-
| JavaScript动画 | 需要精确控制 | 部分 | 高
|}

== 最佳实践 ==
1. 优先使用CSS动画处理视觉变化
2. 使用JavaScript处理用户交互逻辑
3. 避免在动画中触发重排(reflow)
4. 使用<code>will-change</code>属性提示浏览器优化
5. 对移动设备使用<code>transform</code>和<code>opacity</code>属性以获得最佳性能

== 常见问题 ==
'''Q: 何时应该选择JavaScript动画而非CSS动画？'''
A: 当需要：
* 基于物理的动画效果
* 滚动关联动画
* 需要实时计算的复杂路径动画
* 与复杂用户输入交互的动画

'''Q: 如何检测浏览器是否支持特定动画特性？'''
<syntaxhighlight lang="javascript">
if ('animation' in document.body.style) {
  // 支持基础动画
}
if (CSS.supports('animation-timeline: scroll')) {
  // 支持滚动时间轴动画
}
</syntaxhighlight>

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS动画]]