## ADDED Requirements ### Requirement: 频谱可视化组件 系统 SHALL 提供 `SpectrumView` ArkUI 自定义组件,使用 Canvas 实时渲染频谱动画。该组件 SHALL 接收频谱数据并根据当前选中的特效模式进行绘制。 #### Scenario: 组件正常渲染 - **WHEN** `SpectrumView` 组件挂载且音频正在播放 - **THEN** 组件 SHALL 以 30fps 的频率从 `IjkMediaPlayer` 获取 PCM 数据,经 FFT 分析后通过 Canvas 绘制当前特效 #### Scenario: 组件不可见时停止渲染 - **WHEN** 用户滑动 Swiper 离开频谱页面(组件不可见) - **THEN** 组件 SHALL 停止定时器、停止获取 PCM 数据和 Canvas 绑帧渲染,释放 CPU 资源 #### Scenario: 音频暂停时冻结画面 - **WHEN** 音频从播放切换到暂停状态 - **THEN** 组件 SHALL 停止定时器,保留最后一帧的渲染画面不清除 ### Requirement: 柱状频谱特效 系统 SHALL 提供柱状频谱渲染模式,以等间距垂直矩形条展示各频段的实时幅值。 #### Scenario: 柱状条高度随频谱变化 - **WHEN** 柱状频谱模式激活且频谱数据更新 - **THEN** 每个矩形条的高度 SHALL 与对应频段的幅值成正比,底部对齐 Canvas 底边 #### Scenario: 柱状条颜色由频段决定 - **WHEN** 绘制柱状频谱 - **THEN** 矩形条 SHALL 使用从低频到高频的渐变色(如蓝→青→绿→黄→红),颜色亮度 SHALL 随幅值增大而提高 #### Scenario: 柱状条带下落动画 - **WHEN** 某频段幅值从高值下降 - **THEN** 矩形条顶部 SHALL 有一个小方块(峰值指示器),以较慢的速度缓慢下落,模拟重力效果 ### Requirement: 波形频谱特效 系统 SHALL 提供波形频谱渲染模式,以平滑曲线展示频率分布。 #### Scenario: 波形曲线绘制 - **WHEN** 波形频谱模式激活且频谱数据更新 - **THEN** 系统 SHALL 使用贝塞尔曲线连接各频段数据点,形成平滑的波形曲线 #### Scenario: 波形填充与透明度 - **WHEN** 绘制波形频谱 - **THEN** 曲线下方区域 SHALL 使用半透明渐变填充,透明度从曲线处的 0.6 渐变到底部的 0.1 #### Scenario: 线宽随能量变化 - **WHEN** 当前帧总体能量值变化 - **THEN** 波形曲线的线宽 SHALL 在 2px ~ 5px 范围内随能量值成正比变化 ### Requirement: 圆形频谱特效 系统 SHALL 提供圆形频谱渲染模式,以环形排列的放射线展示频谱数据。 #### Scenario: 放射线长度随幅值变化 - **WHEN** 圆形频谱模式激活且频谱数据更新 - **THEN** 以 Canvas 中心为圆心,每个频段对应一条从内圆向外延伸的放射线,线长 SHALL 与频段幅值成正比 #### Scenario: 圆形频谱旋转 - **WHEN** 音频持续播放 - **THEN** 整个圆形频谱 SHALL 以恒定速度缓慢旋转(约 10 秒一圈),旋转速度 SHALL 随总体能量值在 0.5x ~ 1.5x 范围内变化 #### Scenario: 放射线颜色映射 - **WHEN** 绘制放射线 - **THEN** 每条放射线的颜色 SHALL 根据其角度位置从色相环映射(0° = 红,120° = 绿,240° = 蓝),形成彩虹色环效果 ### Requirement: 粒子频谱特效 系统 SHALL 提供粒子频谱渲染模式,使用粒子系统以粒子的运动、大小和颜色表达频谱变化。 #### Scenario: 粒子发射由频谱驱动 - **WHEN** 粒子频谱模式激活且频谱数据更新 - **THEN** 系统 SHALL 从 Canvas 底部区域发射粒子,发射速率与总体能量值成正比,高能量时密集发射、低能量时稀疏发射 #### Scenario: 粒子属性由频段驱动 - **WHEN** 新粒子生成 - **THEN** 粒子的初始大小 SHALL 在 2px ~ 8px 范围内由对应频段幅值决定,初始颜色 SHALL 由频段映射(低频=暖色,高频=冷色),向上运动速度 SHALL 与幅值成正比 #### Scenario: 粒子池复用 - **WHEN** 粒子超出 Canvas 边界或透明度衰减到 0 - **THEN** 该粒子 SHALL 被标记为不活跃并回收到粒子池中等待复用,而非销毁和重新创建。粒子池总量 SHALL 固定为 200 个 ### Requirement: 特效切换交互 系统 SHALL 在频谱页面提供特效切换 UI,用户可在柱状、波形、圆形、粒子四种特效间自由切换。 #### Scenario: 点击切换特效 - **WHEN** 用户点击频谱页面上的特效切换按钮 - **THEN** 系统 SHALL 显示特效选择面板(显示 4 种特效的名称和图标预览),用户选择后立即切换到对应特效 #### Scenario: 切换时平滑过渡 - **WHEN** 用户切换特效模式 - **THEN** 系统 SHALL 在切换瞬间清除 Canvas 并立即以新特效开始渲染,无需过渡动画 #### Scenario: 记忆用户选择 - **WHEN** 用户选择了某种特效后退出播放界面 - **THEN** 下次进入频谱页面时 SHALL 默认使用上次选择的特效模式 ### Requirement: Swiper 集成 播放界面的 Swiper 容器 SHALL 在封面页面和歌词页面之间插入频谱页面,页面顺序为:封面 → 频谱 → 歌词。 #### Scenario: 滑动到频谱页面 - **WHEN** 用户在播放界面从封面页面向左滑动 - **THEN** Swiper SHALL 切换到频谱页面,频谱动画开始渲染 #### Scenario: 从频谱页面继续滑动 - **WHEN** 用户在频谱页面继续向左滑动 - **THEN** Swiper SHALL 切换到歌词页面,频谱动画停止渲染 ### Requirement: 颜色主题适配 频谱可视化 SHALL 支持跟随应用当前主题的主色调。 #### Scenario: 主题色影响频谱配色 - **WHEN** 应用当前主题为某一预设主题(默认、暮色、森林、珊瑚、极夜) - **THEN** 频谱特效的基础色调 SHALL 使用当前主题的品牌色 `$r('app.color.brand')` 作为主色,其他颜色基于此生成