Audio Matrix · 音频矩阵动效

# 组件说明

居中展示的 **16:9 矩阵容器**：32×18 纯正方形色块矩阵，模拟音频频谱 / 数据流的「快进慢退」动力学动画。色彩自左向右由深紫过渡到亮紫极光渐变。适用于音乐页 Hero、加载装饰、数据可视化小组件。

可作为独立 Showcase 页，或嵌入父页面中央区域。

# 模块清单

## 1. 宿主布局（Showcase 页）

- **背景**：纯白 `#FFFFFF`，`height: 100vh`
- **布局**：`flex` 纵向，`justify-content: center; align-items: center`
- **结构**：主舞台 `.stage` + 底部控制区 `.control-panel`
- **溢出**：`overflow: hidden`（全屏展示页）
- **字体**：系统字体栈 `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`
- **禁止**：页面级 TabBar、复杂导航（纯组件展示时可省略）

## 2. 舞台容器 `.stage`

- **比例**：`aspect-ratio: 16 / 9`
- **宽度**：`82vw`，`max-width: 1100px`（小程序可用 `width: 100%` + 固定 `padding` 由父级控制）
- **圆角**：`12px`（小程序 `24rpx`）
- **裁切**：`overflow: hidden`
- **阴影**：`0 40px 100px rgba(0, 0, 0, 0.03)`（极弱立体感，勿加重）
- **背景**：`#FFFFFF`
- **过渡**：`opacity 1s ease`（可选，用于整体显隐）

### DOM 结构

```
.stage
  .grid-container
    .block × (32 × 18 = 576)
```

## 3. 矩阵网格 `.grid-container`

- **布局**：CSS Grid
- **规格**：`grid-template-columns: repeat(32, 1fr)` · `grid-template-rows: repeat(18, 1fr)`
- **间距**：`gap: 2.5px`（小程序 `5rpx`）
- **内边距**：`2px`（小程序 `4rpx`）
- **尺寸**：`width: 100%; height: 100%` 铺满 `.stage`

## 4. 方块 `.block`

- **形状**：纯正方形，`border-radius: 0`（外圆内方对比，方块本身无圆角）
- **默认态**：背景 `#F3F4F6`，`border: none`，`transform: scale(1)`
- **激活态** `.active`：
  - 背景按**列索引**取渐变色（见 §5）
  - 微光晕：`box-shadow: 0 0 8px var(--glow-color)`
- **过渡**：
  - `background-color 0.05s cubic-bezier(0.11, 0, 0.5, 0)`
  - `box-shadow 0.05s ease-out`
- **禁止**：单块圆角、`:hover` 态（小程序无 hover）、过重 shadow

## 5. 色彩系统（按列渐变）

共 `32` 列，每列 `c`（`0 → 31`）独立计算，**左深右浅**：

```
ratio = c / (cols - 1)
h = floor(275 + ratio × 10)     // 色相
s = floor(70 + ratio × 20)      // 饱和度 %
l = floor(25 + ratio × 35)      // 亮度 %，约 25 → 60
blockBackground = hsl(h, s%, l%)
glowColor = rgba(156, 39, 176, 0.1 + ratio × 0.4)
```

- 未激活块统一回退 `#F3F4F6`，`--glow-color: transparent`
- 激活块通过 `style` 或 CSS 变量写入列色与 glow

## 6. 动效引擎（核心）

使用 `requestAnimationFrame` 循环（小程序可用 `Canvas` + 定时器或 `wx.createAnimation` 等效方案）。

### 常量

| 名称 | 值 |
|------|-----|
| `rows` | `18` |
| `cols` | `32` |
| `timeStep` | 每帧 `timeOffset += 0.04` |

### 状态变量

| 变量 | 说明 |
|------|------|
| `isRunning` | 是否运行，默认 `false` |
| `targetVolume` | 目标激活列数，`0 – 32` |
| `currentVolume` | 当前平滑列数 |
| `timeOffset` | 时间偏移 |
| `rowSensitivities[r]` | 每行随机敏感度，`0.15 – 1.0` |
| `rowOffsets[r]` | 每行随机相位，`0 – 100` |

初始化时为 18 行各生成独立的 `rowSensitivities` 与 `rowOffsets`。

### 目标音量更新（每帧）

```
若 random() < 0.12：
  若 random() < 0.15 → targetVolume = cols（拉满）
  否则 → targetVolume = random() × cols
否则：
  targetVolume += (random() - 0.5) × 8
  targetVolume 钳制在 [0, cols]
```

### 快进慢退（Attack / Decay）

```
若 targetVolume > currentVolume：
  currentVolume += (targetVolume - currentVolume) × 0.38    // 快速推进
否则：
  currentVolume += (targetVolume - currentVolume) × 0.045   // 缓慢消退
```

### 每行激活列数

```
dynamicFactor = sin(timeOffset + rowOffsets[r]) × 0.25 + 0.75
activeColsCount = currentVolume × rowSensitivities[r] × dynamicFactor

若 random() < 0.002 → activeColsCount = cols   // 全行闪击
```

### 渲染规则

对每行 `r`、每列 `c`：

```
若 c <= activeColsCount：
  添加 .active，背景 = columnColors[c]，glow = glowColors[c]
否则：
  移除 .active，背景 = #F3F4F6，glow = transparent
```

## 7. 控制面板 `.control-panel`

- **位置**：`.stage` 下方，`margin-top: 40px`（小程序 `80rpx`），水平居中
- **布局**：`text-align: center`

### 按钮 `.action-btn`

- 无底色，描边 `1px solid #111111`
- `padding: 8px 24px`（小程序 `16rpx 48rpx`）
- 字号 `11px`（小程序 `22rpx`），`letter-spacing: 0.2em`，`text-transform: uppercase`
- 颜色 `#111111`，`cursor: pointer`
- **暂停态文案**：`Init Motion Engine`
- **运行态文案**：`Stop Motion Engine`；边框与文字改 `#9C27B0`
- H5 可保留 `:hover` 反色（`background #111`，字 `#FFF`）；小程序无 hover

### 状态文字 `.status-text`

- `margin-top: 12px`（小程序 `24rpx`）
- 字号 `10px`（小程序 `20rpx`），`letter-spacing: 0.1em`，大写
- **暂停**：`Status: Paused`，颜色 `#999999`
- **运行**：`Status: Live / Analysing Data Stream`，颜色 `#9C27B0`

## 8. 交互

- 点击按钮切换 `isRunning`
- **启动**：开始 rAF 循环，更新按钮与状态样式
- **停止**：`cancelAnimationFrame`，恢复默认按钮与状态
- **默认**：暂停，不自动播放

# 实现提示

- **H5**：对照 `demo: audio-matrix.html` 像素级还原
- **小程序**：
  - 576 个 DOM 节点偏重，优先 **Canvas 绘制** 矩阵；若用 `view` 矩阵，避免每帧全量 `setData`，仅更新变化的块
  - `aspect-ratio: 16/9` 可用固定高度或 `padding-top: 56.25%` 兜底
  - 无 `requestAnimationFrame` 时可用 `setInterval(16)` 或 `Canvas` 2d 重绘
- **组件化**：导出为 `audio-matrix` 组件；`.stage` 宽度可由父级 `width` 属性传入
- **禁止**：偏离 32×18 规格、去掉快进慢退算法、默认自动播放（除非用户要求）

API GET /api/v1/audio-matrix