technical-constraints

技术限制

在平台限制内工作，同时保留动画意图。

问题迹象

• 动画在目标浏览器中无法运行
• 移动设备无法流畅处理动画
• 框架限制阻碍实现
• 文件大小受限（Lottie、精灵图）
• 需要适配电子邮件或受限环境

按原则诊断

逐帧动画与姿势到姿势动画

问题：运行时计算开销过大
解决方案：预先计算动画。优先使用 CSS 关键帧（姿势到姿势），而不是使用 JS 逐帧执行（逐帧动画）。

扎实绘制

问题：复杂形状会导致渲染问题
解决方案：简化几何形状。优先使用 CSS 形状，而不是 SVG 路径。减少 3D 中的多边形数量。

时间安排

问题：确保动画在不同设备上的时间一致
解决方案：使用相对单位。在性能最差的目标设备上测试。对于 JS，可考虑使用 requestAnimationFrame。

次要动作

问题：预算只允许实现必要的动画
解决方案：优先处理主要动作。受限时，先删减次要动画。

舞台调度

问题：屏幕空间有限
解决方案：在原位播放动画。使用不会影响布局的变换。受限平台上可考虑默认启用减少动态效果。

快速修复

1. 优先使用 CSS，而不是 JavaScript - 浏览器优化效果更好
2. 渐进增强 - 即使没有动画，核心功能也能正常工作
3. 特性检测 - 动画前检查功能支持情况
4. 回退状态 - 为不支持的浏览器提供静态替代方案
5. 延迟加载动画库 - 不要阻塞初始渲染

故障排除清单

• 列出目标浏览器和设备
• 在 caniuse.com 上检查功能支持情况
• 在支持范围内最旧的浏览器上测试
• 衡量动画对打包体积的影响
• 确认回退体验可以接受
• 在禁用动画的情况下测试
• 检查框架的动画能力
• 考虑服务端渲染的替代方案（GIF、视频）

代码模式

// Feature detection
const supportsAnimation =
  'animate' in Element.prototype &&
  CSS.supports('transform', 'translateZ(0)');

if (supportsAnimation) {
  element.animate(keyframes, options);
} else {
  element.classList.add('final-state');
}

// Progressive enhancement
@supports (animation: name) {
  .element {
    animation: fadeIn 200ms ease-out;
  }
}

平台专属提示

• 电子邮件：使用 GIF 或静态图片
• iOS Safari：测试 -webkit- 前缀
• 较旧的 Android 设备：降低动画复杂度
• 低端设备：将 prefers-reduced-motion 作为判断依据