山形动画组件设计

mountain/
├── README.md                    # 架构说明（本文件）
├── index.ts                     # 统一导出
│
├── canvas-mountain.tsx          # React 组件（主线程）
├── mountain.worker.ts           # Worker 调度器
│
├── mountain.ts                  # Mountain 数据模型类 ⭐️
├── mountain-renderer.ts         # MountainRenderer 渲染器类 ⭐️
│
├── config.ts                    # 配置常量
├── types.ts                     # 类型定义
└── renderer.ts                  # Canvas 渲染函数

class Mountain {
  // 构造函数
  constructor(config: MountainConfig)

  // 生成数据（异步）
  async generate(): Promise<void>

  // 获取数据（只读）
  getPoints(): readonly Point[]
  getLines(): readonly PrecomputedLine[][]
  getDrawArea(): { drawWidth, drawHeight, offsetX, offsetY }
  getRotationConstants(): RotationConstants | null
  getPreRenderState(): PreRenderState | null

  // 清理资源
  dispose(): void
}

class MountainRenderer {
  // 静态方法：判断是否需要重新生成
  static needsRegeneration(
    oldConfig: MountainRendererConfig,
    newConfig: MountainRendererConfig
  ): boolean

  // 构造函数
  constructor(
    ctx: OffscreenCanvasRenderingContext2D,
    canvasWidth: number,
    canvasHeight: number,
    config: MountainRendererConfig
  )

  // 初始化（创建 Mountain 并生成数据）
  async initialize(): Promise<void>

  // 开始动画
  startAnimation(): void

  // 停止动画
  stopAnimation(): void

  // 更新滚动进度
  updateScrollProgress(progress: number): void

  // 清理资源
  dispose(): void

  // 获取 Mountain 实例（调试用）
  getMountain(): Mountain | null
}

// 初始动画模式：逐点增量渲染
renderIncremental() {
  drawMountainIncremental(ctx, lines, renderedPointsCount, ...)
}

// 高性能模式：使用 ImageBitmap 缓存
renderWithBitmapCache() {
  const bitmap = preRenderState.bitmaps.get(nearestStep);
  if (bitmap) {
    ctx.drawImage(bitmap, 0, 0);  // O(1) 操作
  }
}

private animationLoop = (): void => {
  // 1. 增加已渲染点数
  this.animationState.renderedPointsCount += this.animationState.animationSpeed;

  // 2. 判断是否完成
  if (this.animationState.renderedPointsCount >= totalPoints) {
    this.animationState.renderedPointsCount = totalPoints;
    this.animationState.isAnimating = false;

    // 3. 渲染最后一帧
    this.renderFrame();
    this.logAnimationStats(currentTime, totalPoints);
    self.postMessage({ type: "animationComplete" });
    return;
  }

  // 4. 继续渲染
  this.renderFrame();
  this.animationState.animationRafId = requestAnimationFrame(this.animationLoop);
};

private renderFrame(): void {
  const isFullyRendered = renderedPointsCount >= totalPoints;
  
  // 模式 1: 高性能缓存模式（最快）
  if (isFullyRendered && preRenderState?.bitmaps.size > 0) {
    this.renderWithBitmapCache();
  }
  // 模式 2: 增量渲染模式（初始动画）
  else {
    this.renderIncremental();
  }
}

private renderWithBitmapCache(): void {
  const stepSize = 1 / ROTATION_CONFIG.CACHE_STEPS;
  const nearestStep = Math.round(currentScrollProgress / stepSize) * stepSize;
  const bitmap = preRenderState.bitmaps.get(nearestStep);
  
  if (bitmap) {
    // O(1) 操作：直接绘制 GPU 纹理
    this.ctx.drawImage(bitmap, 0, 0);
  } else {
    // 降级到实时渲染，并优先预渲染这个角度
    this.renderFull();
    prioritizeAngle(nearestStep, preRenderState);
  }
  
  // 继续预渲染剩余角度
  if (!preRenderState.isPreRendering && preRenderState.queue.length > 0) {
    scheduleNextPreRender(preRenderState, this.createDrawMountainCallback());
  }
}

// canvas-mountain.tsx - 参数更新时
useEffect(() => {
  const dpr = window.devicePixelRatio || 1;
  
  // 发送新的 DPR 给 Worker
  worker.postMessage({
    type: "updateParams",
    width,
    height,
    dpr,  // 可能变化的 DPR
    ...
  });
}, [width, height, ...]);

// mountain.worker.ts - 处理 DPR 变化
if (newDpr !== dpr) {
  dpr = newDpr;
  
  // 调整 canvas 尺寸
  canvas.width = width * dpr;
  canvas.height = height * dpr;
  
  // 重新应用缩放（调整尺寸会重置 transform）
  ctx.scale(dpr, dpr);
}

<CanvasMountain debug={true} ... />