17370845950

数据加载完成后再启动动画，通过fetch回调触发、CSS变量驱动、差异更新、预解析缓存等策略保障性能与稳定性。

动画启动前必须等数据加载完成

直接在 requestAnimationFrame 循环里发请求会导致动画帧被阻塞，或更糟：动画已开始但数据还没回来，画面卡在初始状态。正确做法是把动画逻辑封装成函数，只在 fetch() 的 .then() 或 async/await 成功回调里触发。

• 用 loading = true 控制按钮/入口禁用，避免重复请求
• 失败时调用 cancelAnimationFrame() 清理残留帧循环
• 服务端返回结构要稳定，比如统一用 { items: [...] }，别让前端动画逻辑去适配字段名变化

用 CSS 自定义属性（CSS Custom Properties）驱动动画值

JS 获取数据后，不直接操作 element.style.transform，而是更新 document.documentElement.style.setProperty('--progress', value)，再在 CSS 里用 transform: scale(var(--progress)); 绑定。这样动画由浏览器原生合成线程处理，不触发重排，性能远好于 JS 改 style。

document.querySelector('#chart').dataset.loaded = 'true';
document.documentElement.style.setProperty('--data-count', data.items.length);
document.documentElement.style.setProperty('--max-value', Math.max(...data.values));

• 务必在设置 CSS 变量前确保元素已挂载（可用 requestIdleCallback 延迟非关键更新）
• 数值记得转成字符串传入，setProperty('--opacity', 0.7) 会报错，得写 '0.7'
• IE 不支持 CSS 变量，如需兼容，改用 element.setAttribute('data-value', ...) + 属性选择器

动画中动态响应数据更新（非首次加载）

比如实时仪表盘每 5 秒轮询新数据，不能每次全量重绘 DOM。应比对新旧数据差异，只对变化的项触发动画：用 oldData.map((v, i) => v !== newData[i]) 生成变更掩码，再对 true 位置的元素添加 animate() 或切换 class。

• 避免在 setInterval 里无条件调用 requestAnimationFrame，容易堆叠未完成帧
• 用 AbortController 中断上一轮未完成的请求，防止旧响应覆盖新动画状态
• 数值插值建议用 linear interpolation (lerp) 而非硬切，例如：current = current + (target - current) * 0.1;

Canvas 动画绑定 JSON 数据时的内存陷阱

用 canvas.getContext('2d') 绘图时，若每帧都 JSON.parse(xhr.responseText)，大体积数据（如 10MB GeoJSON）会频繁触发 GC，造成动画掉帧。应提前解析并缓存结果对象，动画循环中只读取引用。

let parsedData = null;
fetch('/api/chart-data.json')
  .then(r => r.json())
  .then(data => {
    parsedData = data; // 仅解析一次
    startAnimationLoop(); // 启动 requestAnimationFrame 循环
  });

• Canvas 尺寸变化时（如响应式），务必重新调用 canvas.width = canvas.offsetWidth 等，否则绘图会拉伸失真
• 不要在动画帧内做深拷贝（structuredClone 或 Lodash cloneDeep），开销太大
• 离屏 canvas（document.createElement('canvas')）适合预渲染静态图层，减少主 canvas 绘制压力

数据驱动动画的关键不在“怎么动”，而在“什么时候动、依据什么动、动错了怎么收场”。网络延迟、解析耗时、DOM 更新时机、Canvas 清除逻辑——这些环节漏掉一个，动画就从表现力变成 bug 发射器。