- 1版式是通用模板封面铺满 → 歌名 → 进度 → 三个按钮,和大多数音乐 App 一样。封面清晰度不够时铺满半屏只剩一片糊。
- 2播放页里没有形状语言Expressive 的形状只出现在双击收藏的心形爆发里,主画面没有任何会形变的元素。
- 3控件散落上一首 / 播放 / 下一首是三颗独立按钮;定时、队列、歌词挤在右下角,图标 24dp、没有底色,看起来像次要信息。
- 4横屏把歌词挤成一行右栏同时放歌名、音源、歌词、进度、按钮,歌词区只剩一行高度,横屏最该展示的内容反而最小。
三端播放页改成以「形状封面」为中心的布局:封面裁成 Expressive 形状,播放时轮廓慢慢转,暂停和切歌时形变;控件收进一组连接按钮和一条浮动工具栏。歌词背景的“动态”和“律动”改用同一套流光场,音乐只调节流速、光斑大小和亮度,不再整屏抖动和闪白。
MaterialShapes 裁切,切歌随机换形状,也能在设置里固定一种;暂停变圆角方形看全图。
上一首、播放、下一首连成一块;播放中中段变胶囊,按下的那段变宽。
歌词、队列、定时、音源收进底部悬浮条,替换右下角 24dp 小图标。
平板和电视右侧整栏给歌词,当前行放大、远处的行降透明度并轻微模糊。
四团封面色光沿各自轨迹流动;律动只改流速和光量,分柔和、标准两档。
右图是现在的平板横屏播放页(模拟器截图,封面原图只有 128px 量级)。
原型可以直接点:播放 / 暂停看封面形变,上一首 / 下一首看形状和配色切换,点工具栏里的「歌词」进入歌词页。背景跟着内置节奏律动(静音),暂停后慢慢停下。
右侧的“设置预览”和设置页里的选项一致:选「随机」后每次切歌换一种形状,选具体形状会立刻形变过去;律动强度可以在柔和和标准之间切换。
编号对应右侧说明,进入歌词页后自动隐藏。
手机竖排;平板左边是播放、右边整栏是歌词;电视是 10 英尺距离,字号和焦点都放大,空闲后进入环境模式。
封面 280dp 居中,下面依次是标题、两行歌词、进度、按钮组、工具栏。暂停时封面是圆角方形,按钮组三段贴在一起。
大封面缩到左上角 52dp 并形变成圆形(共享元素),歌词左对齐,当前行放大 1.24 倍;底部是小号按钮组和“歌词 / 队列”。
4 秒无操作后顶栏、按钮组、工具栏淡出,留下封面、标题、三行歌词和一条细进度。第一下触摸只唤醒,不触发按钮(与现在一致)。
左栏 560dp:320dp 形状封面、标题、音源、进度、按钮组、工具栏。右栏整栏歌词,当前行 38sp。背景遮罩向右加深,保证歌词对比度。
工具栏里点「歌词」后左栏收成 VerticalFloatingToolbar(小封面、上一首、播放、下一首、退出),歌词扩到 48sp,进度条横跨底部。
外壳右侧的 NowPlayingPane 用同一个形状封面和按钮组的小号版本,不另做一套。
底部一条浮动条:按钮组(播放键带焦点环并放大 1.06 倍)、进度、定时 / 收藏 / 队列 / 音源。焦点顺序和现在一样,左右键在进度条上快退快进 10 秒。
控制条淡出但不移出组合(焦点仍在播放键,第一下按键只唤醒),歌词区向下扩展、当前行放大到 36sp,底部只留一条细进度。
环境模式右上角显示时间,跟随系统 12/24 小时制。默认显示,在“设置 → 播放页 → 电视”里关闭;关闭后右上角留空。
全部用 material3 1.5.0-alpha25 里已有的组件:ButtonGroup、HorizontalFloatingToolbar、VerticalFloatingToolbar、MaterialShapes(已在本机 jar 里核对过)。
| 部件 | 手机 | 平板 | 电视 | 动效 |
|---|---|---|---|---|
| 形状封面 | 280dp | 320dp | 280dp | 轮廓 40s/圈;暂停 → 圆角方形 slowSpatial;切歌形变 defaultSpatial |
| 形状来源 | 随机(默认):每次切歌从 6 种里抽一种,不和上一首重复,重新打开播放页不换;固定:所有歌用同一种,切歌只换封面图 | 固定模式下切歌不形变,封面图交叉淡入 defaultEffects | ||
| 歌名 | 30sp / 800 | 34sp / 800 | 34sp / 800 | 切歌时淡出淡入 defaultEffects |
| 按钮组 | 312×88,播放段 144 | 320×88 | 232×64 | 按下变宽 fastSpatial;中段变胶囊 defaultSpatial |
| 工具栏 | 高 60,5 项 | 高 56,5 项 | 并入控制条 | 空闲淡出 defaultEffects |
| 当前歌词行 | 20sp(预览)/ 28sp(歌词页) | 38sp / 48sp | 30sp / 36sp | 换行滚动 slowSpatial,放大 1.24 倍 |
| 远处歌词行 | 相邻行 60% 透明度;更远 38% 透明度,API 31+ 再加 1.4dp 模糊(以下版本只降透明度) | 透明度 defaultEffects | ||
| 弹簧参数 | fastSpatial 0.6/800 · defaultSpatial 0.8/380 · slowSpatial 0.8/200 · effects 阻尼 1.0(MotionScheme.expressive;开启“减少动画”时换 standard 并关闭旋转) | |||
随机从前 6 种里抽,设置里也可以固定成其中一种。圆角方形只用于暂停态,不参与随机。图里是近似画法,实机直接用 MaterialShapes 原形。
原来的「歌词」设置页改名为「播放页」,副标题改成“封面形状、歌词背景、律动强度”。新增三项,和现有的外观、歌词设置一样只存在本机,不参与歌单同步。
| 设置项 | 选项 | 默认 | 出现在 | 作用 |
|---|---|---|---|---|
| 封面形状 | 随机 / 十二瓣 / 九瓣 / 七瓣 / 太阳 / 星芒 / 八叶 | 随机 | 三端 | 随机:每次切歌换一种,不和上一首重复。固定:所有歌都用这一种。选项本身用当前封面裁成对应形状做预览。 |
| 显示歌词背景 | 关闭 / 动态 / 律动 | 动态 | 三端 | 现有设置,不变。 |
| 律动强度 | 柔和 / 标准 | 标准 | 三端;只在选了“律动”时出现 | 两档参数见下一节的对照表。 |
| 环境模式显示时钟 | 开 / 关 | 开 | 只在电视上出现(含强制电视布局) | 空闲 4 秒进入环境模式后右上角显示时间。 |
对照的是 LyricsBackdrop.kt 里的 ReactiveBackdrop 和 RhythmAnalysis.kt。
scale = 1.06 + energy×0.055 + pulse×0.075,同时按 energy 往右下平移(92–99 行)。位置直接等于音量,画面一下一下地晃,像镜头在抖。左边按现在的代码 1:1 移植,右边是新的流光场。两边吃的是同一路分析数据,分析算法也是从 RhythmAnalysis.kt 照搬的 JS 版本。默认用页面内置的一段 104 BPM 节奏(第 5–6 小节是安静的过门),也可以换成本机音乐。内置节奏是干净的鼓机,两边的起拍次数差不多,区别主要在画法;有镲片和人声的真实歌曲可以换进来自己对比。
正在生成内置节奏…
“动态”和“律动”用同一个渲染器。底层是放大旋转的 24px 封面,上面四团取自封面主色的光,各自沿一条李萨如曲线慢慢漂;最上面是一层固定的遮罩,保证歌词对比度。“动态”以固定速度流动,“律动”在此基础上让音乐调参数。下表是“标准”档:
| 信号 | 驱动什么 | 幅度 | 平滑(上升 / 回落) |
|---|---|---|---|
| 响度(新增) | 流动速度:相位按速度积分,位置永远连续 | 基础速度 × 1 → 2.3 | 500ms / 1200ms |
| 低频 | 四团光的半径、封面光晕亮度、进度条波幅 | 半径 +0–14% | 70ms / 380ms |
| 中频 | 第二团光(tertiary 色)的不透明度 | +0–0.12 | 120ms / 600ms |
| 高频 | 一小团高光的不透明度,不再驱动缩放 | +0–0.08 | 200ms / 500ms |
| 鼓点(改成低频起拍) | 四团光同时胀开一下,从封面位置散开一圈很淡的光环 | 半径 +10%,光环不透明度 ≤ 0.09 | 50ms / 450ms |
两档用同一套平滑参数,只是幅度不同。柔和档去掉鼓点光环,适合抒情歌或者觉得背景太活跃的人。上面的演示可以直接切换两档对比。
| 参数 | 柔和 | 标准(默认) |
|---|---|---|
| 流动速度 | × 1 → 1.5 | × 1 → 2.3 |
| 光团半径(低频) | +0–7% | +0–14% |
| 中频 / 高频光量 | +0.06 / +0.04 | +0.12 / +0.08 |
| 鼓点 | 光团胀开 +5%,没有光环 | 光团胀开 +10%,散开一圈光环 |
| 封面光晕亮度 | +0–0.04 | +0–0.08 |
| 进度条波幅 | 固定 | 随低频起伏 |
withFrameNanos 逐帧做一阶平滑,时间常数与帧率无关,90/120Hz 上同样顺滑。RhythmFrame 加 loudness(整段 RMS 的慢包络)和 kick(只看 0–690Hz 的谱通量,不应期 280ms)。原来的全频起拍保留给测试和诊断,不再驱动画面。背景先做,它独立、改动小,可以先在真机上确认手感。
playback/RhythmAnalysis.kt:加 loudness、低频起拍检测器;更新 RhythmAnalysisTest。ui/player/LyricsBackdrop.kt:FlowField 取代 AmbientBackdrop 和 ReactiveBackdrop;光团颜色取封面量化后的前 4 个颜色。data/AppStore.kt:新增 rhythmIntensity(柔和 / 标准,默认标准)。ui/settings/LyricsSettingsScreen.kt:页面改名「播放页」,更新三档说明,加律动强度。ui/player/CoverStage.kt:形状封面(Morph 缓存路径,轮廓旋转在 graphicsLayer 里读角度,不触发重组)和光晕。ui/player/TransportControls.kt:连接按钮组、浮动工具栏。PlayerScreen.kt 的 PhonePlayer / PhoneLyrics 重排;SharedCover.kt 的共享元素改成形状裁切。AppStore.kt 新增 coverShape(随机或某个形状名,默认随机);设置页加形状选择器。随机结果存在播放会话里,重新打开播放页不换。AppStore.kt 新增 tvAmbientClock(默认开);设置页只在电视上显示这个开关。PlayerParts.kt 的 LyricsList 加按距离降透明度 / 模糊。:app:compileDebugKotlin :app:testDebugUnitTest。2026-10-26 确认。括号里是我补的细节和默认值,有不同意见直接改。