CSS Houdini 简介

CSS Houdini 是一组底层 API，允许开发者直接访问 CSS 渲染引擎的扩展能力。通过它，可以绕过传统 CSS 的限制，实现高性能、复杂的动画效果，例如粒子动画。Houdini 的核心模块包括：

• Paint API：自定义 CSS 绘制逻辑（如粒子效果）。
• Layout API：自定义布局规则（较少用于动画）。
• Animation Worklet：高性能动画控制（避免主线程阻塞）。

实现粒子动画的底层原理

性能优化关键

1. 脱离主线程：通过 Worklet 在独立线程运行动画逻辑，避免主线程的渲染或计算任务阻塞。
2. 硬件加速：利用 GPU 渲染粒子（通过 transform 或 opacity 属性触发）。
3. 批量更新：一次性处理粒子状态，而非逐帧修改 DOM/CSS。

核心步骤

1. 定义粒子属性
使用 JavaScript 生成粒子数据（坐标、速度、颜色等），存储为 TypedArray 以提高内存效率：

const particles = new Float32Array(COUNT * 4); // 每粒子占4项: x, y, vx, vy
for (let i = 0; i < particles.length; i += 4) {
  particles[i] = Math.random() * width;  // x
  particles[i + 1] = Math.random() * height; // y
  particles[i + 2] = Math.random() * 2 - 1; // vx
  particles[i + 3] = Math.random() * 2 - 1; // vy
}

2. 注册 Paint Worklet
通过 Paint API 定义自定义绘制逻辑：

registerPaint('particle-system', class {
  static get inputProperties() { return ['--particle-count']; }
  paint(ctx, size, props) {
    const count = props.get('--particle-count').value;
    for (let i = 0; i < count; i++) {
      const x = particles[i * 4], y = particles[i * 4 + 1];
      ctx.fillStyle = `hsl(${i % 360}, 100%, 50%)`;
      ctx.fillRect(x, y, 2, 2); // 绘制粒子
    }
  }
});

3. 使用 Animation Worklet 更新状态
在独立线程中计算粒子位置：

class ParticleAnimator {
  animate(currentTime, effect) {
    for (let i = 0; i < COUNT; i++) {
      particles[i * 4] += particles[i * 4 + 2]; // x += vx
      particles[i * 4 + 1] += particles[i * 4 + 3]; // y += vy
      // 边界检测
      if (particles[i * 4] < 0 || particles[i * 4] > width) particles[i * 4 + 2] *= -1;
      if (particles[i * 4 + 1] < 0 || particles[i * 4 + 1] > height) particles[i * 4 + 3] *= -1;
    }
    effect.localTime = currentTime; // 触发重绘
  }
}
registerAnimator('particle-animator', ParticleAnimator);

4. CSS 应用
将 Worklet 与 CSS 绑定：

.canvas {
  --particle-count: 1000;
  background: paint(particle-system);
  animation: update 1s infinite;
}
@keyframes update {
  to { --progress: 1; }
}

对比传统实现

适用场景

• 大量粒子（>1000）需平滑动画。
• 需要动态调整物理规则（如引力、碰撞）。

浏览器兼容性
需 Chrome 或 Edge 支持，可通过 Polyfill 部分降级（如 CSS Paint Polyfill）。