如何在Chrome中模拟Firefox的calcMode="linear"动画行为？

问题场景 #

• 两个关联图表：
  • 图表1：绘制捕食者、猎物的函数曲线，圆形标记通过animateMotion沿路径动画，要求标记沿X轴保持恒定速度
  • 图表2：基于上述函数生成的相曲线，圆形标记需与图表1的Y值实时同步
• 跨浏览器差异：Firefox中calcMode="linear"可满足X轴匀速要求，但Chrome中该属性表现等同于calcMode="paced"，导致标记沿曲线匀速而非X轴匀速

核心难点 #

手动给图表1配置keyTimes和keyPoints实现X轴匀速已较为繁琐，且无法推导图表2对应的参数来实现与图表1的Y值同步

可行解决方案思路 #

1. 统一基于时间轴驱动动画（推荐） #

放弃依赖animateMotion的原生属性，改用D3的时间API手动控制两个标记的位置，从根源上避免浏览器兼容问题：

• 预先计算图表1中X轴匀速对应的时间-位置映射表
• 根据当前时间点，直接计算图表1标记的坐标，同时通过函数关系推导图表2相曲线上的对应坐标
• 示例代码片段：

  // 配置参数
  const duration = 5000; // 动画总时长（毫秒）
  const stepCount = 100; // 拆分的步数，控制动画平滑度
  
  // 预先生成X轴匀速的时间-数据映射
  const xSteps = d3.range(0, 1.01, 1/stepCount);
  const timePoints = xSteps.map(t => t * duration);
  // 替换为实际的猎物、捕食者函数
  const preyYValues = xSteps.map(t => preyFunction(t));
  const predatorYValues = xSteps.map(t => predatorFunction(t));
  // 预计算相曲线对应点
  const phasePoints = xSteps.map(t => [preyFunction(t), predatorFunction(t)]);
  
  // 启动定时器驱动动画
  let startTime = Date.now();
  d3.timer(() => {
    const elapsed = Date.now() - startTime;
    if (elapsed > duration) return true; // 动画结束，停止定时器
    
    const progress = Math.min(elapsed / duration, 1);
    // 通过二分法找到当前进度对应的步长索引
    const idx = d3.bisect(timePoints, elapsed);
    
    // 更新图表1标记位置
    preyMarker.attr("cx", xScale(xSteps[idx]))
              .attr("cy", yScale(preyYValues[idx]));
    predatorMarker.attr("cx", xScale(xSteps[idx]))
                  .attr("cy", yScale(predatorYValues[idx]));
    
    // 更新图表2标记位置（替换为相曲线的比例尺）
    phaseMarker.attr("cx", phaseXScale(phasePoints[idx][0]))
               .attr("cy", phaseYScale(phasePoints[idx][1]));
  });
  

2. 修正Chrome中animateMotion的calcMode行为（原生动画方案） #

若坚持使用原生animateMotion，需手动计算两个图表的keyTimes和keyPoints：

• 图表1配置：生成等X步长的路径点序列，将这些点作为keyPoints，keyTimes按线性均匀分配（如0, 0.01, 0.02, ..., 1），确保X轴匀速
• 图表2配置：
  1. 获取相曲线路径的总长度：phasePath.node().getTotalLength()
  2. 对图表1每个X步长对应的相曲线点，计算该点到路径起点的长度，除以总长度得到该点的keyPoints值
  3. keyTimes与图表1完全一致，确保两个动画的时间轴同步

内容的提问来源于stack exchange，提问作者Ignacio Mariotti