如何为Anychart旭日图（Sunburst）的startAngle添加动画效果

由于Anychart旭日图没有内置的startAngle动画方法，我们可以通过手动逐帧更新角度并重绘图表的方式实现平滑过渡效果。以下是具体实现步骤：

1. 添加动画状态标记 #

首先在组件中添加一个标记，防止同时触发多个动画：

private isAnimating = false;

2. 绑定叶子节点点击事件 #

在图表初始化代码中，添加pointClick事件监听，判断点击的是否为叶子节点（无子节点），并计算目标角度：

this.chart.listen('pointClick', (e) => {
  const clickedPoint = e.target;
  // 仅处理叶子节点（没有子节点的层级）
  if (!clickedPoint.get('children') || clickedPoint.get('children').length === 0) {
    if (this.isAnimating) return; // 动画进行中时忽略新的点击

    const currentStartAngle = this.chart.startAngle();
    // 获取当前叶子节点的起始和结束角度
    const segmentStart = clickedPoint.get('startAngle');
    const segmentEnd = clickedPoint.get('endAngle');
    // 计算叶子节点的中点角度
    const segmentMid = (segmentStart + segmentEnd) / 2;

    // 目标角度：将叶子节点中点对齐到顶部（0度），可根据需求调整
    let targetAngle = (0 - segmentMid) % 360;
    if (targetAngle < 0) targetAngle += 360;

    // 启动动画：从当前角度过渡到目标角度，时长500ms
    this.animateStartAngle(currentStartAngle, targetAngle, 500);
  }
});

3. 实现动画核心函数 #

编写一个使用requestAnimationFrame的动画函数，逐帧更新startAngle并重绘图表：

private animateStartAngle(start: number, target: number, duration: number) {
  this.isAnimating = true;
  const startTime = Date.now();
  let delta = target - start;

  // 处理角度环绕问题，选择最短路径动画（比如从350到10度，顺时针走20度而非逆时针340度）
  if (delta > 180) delta -= 360;
  else if (delta < -180) delta += 360;

  const animateFrame = () => {
    const elapsedTime = Date.now() - startTime;
    const progress = Math.min(elapsedTime / duration, 1);

    // 使用缓动函数（ease-in-out）让动画更自然
    const easedProgress = progress < 0.5 
      ? 2 * progress * progress 
      : 1 - Math.pow(-2 * progress + 2, 2) / 2;

    // 计算当前帧的角度值并归一化到0-360范围
    let currentAngle = start + delta * easedProgress;
    currentAngle = currentAngle % 360;
    if (currentAngle < 0) currentAngle += 360;

    // 更新图表角度并重绘
    this.chart.startAngle(currentAngle);
    this.chart.draw();

    // 未完成则继续下一帧
    if (progress < 1) {
      requestAnimationFrame(animateFrame);
    } else {
      this.isAnimating = false; // 动画结束，重置标记
    }
  };

  requestAnimationFrame(animateFrame);
}

关键说明 #

• 角度对齐逻辑：示例中将叶子节点中点对齐到顶部（0度），你可以修改targetAngle的计算逻辑，比如设置为90度让节点对齐到右侧。
• 缓动效果：使用ease-in-out缓动函数，让动画开始和结束时更平滑，避免生硬的线性变化。
• 防并发动画：isAnimating标记确保同一时间只有一个动画在运行，避免冲突。
• 最短路径处理：通过调整角度差值，确保动画总是选择最短的旋转方向，提升用户体验。

内容的提问来源于stack exchange，提问作者Sahil Agarwal