Translation Comparison - technical-constraints

Animation doesn't work on target browsers
Mobile devices can't handle animation
Framework limitations block implementation
File size constraints (Lottie, sprites)
Email/constrained environment needs

动画在目标浏览器中无法运行
移动设备无法承载动画效果
框架限制阻碍动画实现
文件大小约束（如Lottie、精灵图）
邮件/受限环境的特殊需求

Diagnosis by Principle

基于动画原则的诊断

Straight Ahead vs Pose-to-Pose

逐帧动画vs关键帧动画

Issue: Runtime calculations too expensive Fix: Pre-calculate animations. Use CSS keyframes (pose-to-pose) over JS frame-by-frame (straight ahead).

问题：运行时计算成本过高 解决方案：预计算动画。优先使用CSS关键帧（关键帧动画）而非JS逐帧动画（逐帧动画）。

Solid Drawing

图形简化

Issue: Complex shapes cause rendering issues Fix: Simplify geometry. Use CSS shapes over SVG paths. Reduce polygon counts in 3D.

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

Issue: Consistent timing across devices Fix: Use relative units. Test on slowest target device. Consider

requestAnimationFrame

for JS.

问题：跨设备保持一致的动画时序 解决方案：使用相对单位。在最低配置的目标设备上测试。JS动画可考虑使用

requestAnimationFrame

。

Secondary Action

次要动作取舍

Issue: Budget only allows essential animation Fix: Prioritize primary actions. Cut secondary animations first when constrained.

问题：资源预算仅允许核心动画 解决方案：优先保证主行动画。受限时首先削减次要动画。

Staging

舞台适配

Issue: Limited screen real estate Fix: Animate in place. Use transforms that don't affect layout. Consider reduce-motion as default on constrained platforms.

问题：屏幕空间有限 解决方案：原地动画。使用不影响布局的transform属性。在受限平台上优先将reduce-motion设为默认。

Quick Fixes

快速修复方案

Use CSS over JavaScript - Better browser optimization
Progressive enhancement - Core function works without animation
Feature detection - Check capability before animating
Fallback states - Static alternative for unsupported browsers
Lazy load animation libraries - Don't block initial render

优先使用CSS而非JavaScript - 浏览器优化效果更好
渐进式增强 - 核心功能在无动画时仍可正常工作
特性检测 - 动画前先检查设备能力
降级状态 - 为不支持动画的浏览器提供静态替代方案
懒加载动画库 - 不阻塞初始渲染

Troubleshooting Checklist

故障排查清单

List target browsers/devices
Check caniuse.com for feature support
Test on oldest supported browser
Measure animation impact on bundle size
Verify fallback experience is acceptable
Test with animation disabled
Check framework animation capabilities
Consider server-rendered alternatives (GIF, video)

列出目标浏览器/设备
在caniuse.com上查询特性支持情况
在最旧的支持浏览器上测试
评估动画对包体积的影响
验证降级体验是否可接受
测试禁用动画后的效果
检查框架的动画能力
考虑服务端渲染替代方案（GIF、视频）

Code Pattern

代码示例

// 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;
  }
}

// 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;
  }
}

Platform-Specific Tips

平台特定提示

Email: Use GIF or static images
iOS Safari: Test
```
-webkit-
```
prefixes
Older Android: Reduce animation complexity
Low-end devices: Use
```
prefers-reduced-motion
```
as proxy

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

technical-constraints

Original

Translation

Technical Constraints

技术约束

Problem Indicators

问题表现