myMusic · 设计方案 · 2026-10-26 · 方向已确认,未实现

播放页重设计

三端播放页改成以「形状封面」为中心的布局:封面裁成 Expressive 形状,播放时轮廓慢慢转,暂停和切歌时形变;控件收进一组连接按钮和一条浮动工具栏。歌词背景的“动态”和“律动”改用同一套流光场,音乐只调节流速、光斑大小和亮度,不再整屏抖动和闪白。

手机 360×800 dp 平板横屏 1280×800 dp 电视 960×540 dp 新增设置:封面形状 · 律动强度 · 电视时钟 不改:队列 / 音源 / 定时面板、手势、读屏文案

形状封面

MaterialShapes 裁切,切歌随机换形状,也能在设置里固定一种;暂停变圆角方形看全图。

连接按钮组

上一首、播放、下一首连成一块;播放中中段变胶囊,按下的那段变宽。

浮动工具栏

歌词、队列、定时、音源收进底部悬浮条,替换右下角 24dp 小图标。

歌词升为一栏

平板和电视右侧整栏给歌词,当前行放大、远处的行降透明度并轻微模糊。

流光场背景

四团封面色光沿各自轨迹流动;律动只改流速和光量,分柔和、标准两档。

现状

为什么显得中规中矩

右图是现在的平板横屏播放页(模拟器截图,封面原图只有 128px 量级)。

现在的平板横屏播放页:左边铺满模糊封面,右边一列依次是歌名、音源、单行歌词、进度条和三个按钮
  • 1
    版式是通用模板封面铺满 → 歌名 → 进度 → 三个按钮,和大多数音乐 App 一样。封面清晰度不够时铺满半屏只剩一片糊。
  • 2
    播放页里没有形状语言Expressive 的形状只出现在双击收藏的心形爆发里,主画面没有任何会形变的元素。
  • 3
    控件散落上一首 / 播放 / 下一首是三颗独立按钮;定时、队列、歌词挤在右下角,图标 24dp、没有底色,看起来像次要信息。
  • 4
    横屏把歌词挤成一行右栏同时放歌名、音源、歌词、进度、按钮,歌词区只剩一行高度,横屏最该展示的内容反而最小。
交互原型 · 手机

形状舞台

原型可以直接点:播放 / 暂停看封面形变,上一首 / 下一首看形状和配色切换,点工具栏里的「歌词」进入歌词页。背景跟着内置节奏律动(静音),暂停后慢慢停下。

右侧的“设置预览”和设置页里的选项一致:选「随机」后每次切歌换一种形状,选具体形状会立刻形变过去;律动强度可以在柔和和标准之间切换。

编号对应右侧说明,进入歌词页后自动隐藏。

手机 · 默认 · 360×800 dp · 可操作
封面形状(设置 → 播放页)
律动强度
  1. 1
    音源胶囊顶部居中显示「QQ音乐 · 无损」,点开就是现在的换源面板。剩余定时只显示在工具栏里,这里始终是音源。
  2. 2
    形状封面封面裁成 MaterialShapes 形状。默认每次切歌随机换一种(不和上一首重复),也可以在设置里固定成一种。播放时外轮廓 40 秒转一圈,画面本身保持正向;暂停时轮廓形变成圆角方形并停下,能看到完整封面;切歌时旧形状直接形变到新形状。
  3. 3
    封面光晕封面后面放一层放大、模糊的同图,让封面像从背景里透出来;律动开启时随低频轻微变亮。
  4. 4
    标题与收藏中文歌名 30sp 粗体,两行内放不下才缩小;歌手名用 primary 色。收藏是 M3E 切换按钮:未收藏是圆形,收藏后变成圆角方形并填色。
  5. 5
    两行歌词当前行逐字填色,下一行 40% 透明;点按进入歌词页。没有同步歌词时这一块不占位。
  6. 6
    波浪进度条沿用现在的 WavySeekBar;律动“标准”档下波幅跟着低频起伏,“柔和”档保持固定波幅,暂停都拉平。
  7. 7
    连接按钮组三段连成 312×88dp 的整块,两端满圆、内侧 14dp。播放中中段变成胶囊并和两侧拉开 8dp;按下哪段哪段变宽,相邻段让位。
  8. 8
    浮动工具栏HorizontalFloatingToolbar:歌词(开启时带文字和底色)、队列、定时、音源、更多。定时开启后,定时按钮展开成剩余时间(如 28:40)。
三端布局

同一套部件,三种排法

手机竖排;平板左边是播放、右边整栏是歌词;电视是 10 英尺距离,字号和焦点都放大,空闲后进入环境模式。

默认 · 暂停态
歌词页
空闲 4 秒后

默认

封面 280dp 居中,下面依次是标题、两行歌词、进度、按钮组、工具栏。暂停时封面是圆角方形,按钮组三段贴在一起。

歌词页

大封面缩到左上角 52dp 并形变成圆形(共享元素),歌词左对齐,当前行放大 1.24 倍;底部是小号按钮组和“歌词 / 队列”。

空闲

4 秒无操作后顶栏、按钮组、工具栏淡出,留下封面、标题、三行歌词和一条细进度。第一下触摸只唤醒,不触发按钮(与现在一致)。

部件规格

尺寸、形状、动效

全部用 material3 1.5.0-alpha25 里已有的组件:ButtonGroup、HorizontalFloatingToolbar、VerticalFloatingToolbar、MaterialShapes(已在本机 jar 里核对过)。

部件手机平板电视动效
形状封面280dp320dp280dp轮廓 40s/圈;暂停 → 圆角方形 slowSpatial;切歌形变 defaultSpatial
形状来源随机(默认):每次切歌从 6 种里抽一种,不和上一首重复,重新打开播放页不换;固定:所有歌用同一种,切歌只换封面图固定模式下切歌不形变,封面图交叉淡入 defaultEffects
歌名30sp / 80034sp / 80034sp / 800切歌时淡出淡入 defaultEffects
按钮组312×88,播放段 144320×88232×64按下变宽 fastSpatial;中段变胶囊 defaultSpatial
工具栏高 60,5 项高 56,5 项并入控制条空闲淡出 defaultEffects
当前歌词行20sp(预览)/ 28sp(歌词页)38sp / 48sp30sp / 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 秒进入环境模式后右上角显示时间。
  • ·
    形状选择器4 列网格(电视一行 7 个),每个选项是 56dp 的形状预览加名字;选中项加 primary 描边和对勾。电视上方向键在网格里移动,OK 选中。
  • ·
    改动立即生效播放页开着时改形状,封面直接形变到新形状;选回“随机”从下一次切歌开始生效。
  • ·
    减少动画开启后封面不旋转,切歌和暂停的形变改成直接切换;律动强度选项仍显示,但背景按现在的规则回退成静止。
歌词背景律动

为什么现在看着怪

对照的是 LyricsBackdrop.kt 里的 ReactiveBackdrop 和 RhythmAnalysis.kt。

  • 1
    整张背景跟着低频缩放和平移封面层 scale = 1.06 + energy×0.055 + pulse×0.075,同时按 energy 往右下平移(92–99 行)。位置直接等于音量,画面一下一下地晃,像镜头在抖。
  • 2
    全屏明暗在抽动黑色遮罩透明度随 energy 和 pulse 变化(135 行),再叠一层白色 Screen 光(169–173 行),每次起拍中间闪白,颜色被冲淡,歌词对比度也跟着变。
  • 3
    光斑钉在三个角上低 / 中 / 高频三团光固定在左上、右下、右上(116–118 行),只在原地胀缩,看起来像三盏灯在闪,不像音乐在流动。而且每团光是“平移整块画布大小的矩形”画出来的,低频大时左上角光斑的矩形右移约 6%,左边缘会露出一条随节拍滑动的竖直硬边(对照演示里左图能看到)。
  • 4
    没有逐帧插值分析器每秒发 30 帧,绘制直接用最新值,60/120Hz 屏幕上是阶梯式跳变;energy 的上升系数 0.62 几乎等于原始值。
  • 5
    起拍检测太灵敏全频段(到 14kHz)的谱通量判起拍,不应期只有 110ms,镲片、人声咬字这类高频瞬态也算起拍,最快每秒能触发 9 次;每次都带一下缩放和闪白。
  • 6
    拍与拍之间是静止的律动模式没有“动态”那样的持续流动,于是变成“静止—抖一下—静止”。

同一段音乐,两种画法

左边按现在的代码 1:1 移植,右边是新的流光场。两边吃的是同一路分析数据,分析算法也是从 RhythmAnalysis.kt 照搬的 JS 版本。默认用页面内置的一段 104 BPM 节奏(第 5–6 小节是安静的过门),也可以换成本机音乐。内置节奏是干净的鼓机,两边的起拍次数差不多,区别主要在画法;有镲片和人声的真实歌曲可以换进来自己对比。

正在生成内置节奏…

现在 · ReactiveBackdrop 原样移植
新方案 · 流光场

新方案:流光场

“动态”和“律动”用同一个渲染器。底层是放大旋转的 24px 封面,上面四团取自封面主色的光,各自沿一条李萨如曲线慢慢漂;最上面是一层固定的遮罩,保证歌词对比度。“动态”以固定速度流动,“律动”在此基础上让音乐调参数。下表是“标准”档:

信号驱动什么幅度平滑(上升 / 回落)
响度(新增)流动速度:相位按速度积分,位置永远连续基础速度 × 1 → 2.3500ms / 1200ms
低频四团光的半径、封面光晕亮度、进度条波幅半径 +0–14%70ms / 380ms
中频第二团光(tertiary 色)的不透明度+0–0.12120ms / 600ms
高频一小团高光的不透明度,不再驱动缩放+0–0.08200ms / 500ms
鼓点(改成低频起拍)四团光同时胀开一下,从封面位置散开一圈很淡的光环半径 +10%,光环不透明度 ≤ 0.0950ms / 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
进度条波幅固定随低频起伏
  • A
    不再移动整张画面音乐只改速度和大小,任何图层的位置都由相位积分得到,不会跟着音量来回跳。
  • B
    不闪白、不抽动亮度去掉白色 Screen 光和随能量变化的黑遮罩;遮罩改成固定渐变。整体亮度波动控制在 6% 以内。
  • C
    按屏幕刷新率插值分析仍是 30 帧,绘制用 withFrameNanos 逐帧做一阶平滑,时间常数与帧率无关,90/120Hz 上同样顺滑。
  • D
    安静就平静响度包络慢,过门和抒情段会自然慢下来,接近“动态”;暂停后速度用 1.2 秒降到 0,停住而不是跳回原位。
  • E
    分析器改动RhythmFrame 加 loudness(整段 RMS 的慢包络)和 kick(只看 0–690Hz 的谱通量,不应期 280ms)。原来的全频起拍保留给测试和诊断,不再驱动画面。
  • F
    减少动画与现在一样回退到静止背景,不做分析。
实施

分四步做

背景先做,它独立、改动小,可以先在真机上确认手感。

P1

流光场 + 分析器

  • playback/RhythmAnalysis.kt:加 loudness、低频起拍检测器;更新 RhythmAnalysisTest。
  • ui/player/LyricsBackdrop.kt:FlowField 取代 AmbientBackdrop 和 ReactiveBackdrop;光团颜色取封面量化后的前 4 个颜色。
  • data/AppStore.kt:新增 rhythmIntensity(柔和 / 标准,默认标准)。
  • ui/settings/LyricsSettingsScreen.kt:页面改名「播放页」,更新三档说明,加律动强度。
P2

手机播放页

  • 新增 ui/player/CoverStage.kt:形状封面(Morph 缓存路径,轮廓旋转在 graphicsLayer 里读角度,不触发重组)和光晕。
  • 新增 ui/player/TransportControls.kt:连接按钮组、浮动工具栏。
  • PlayerScreen.kt 的 PhonePlayer / PhoneLyrics 重排;SharedCover.kt 的共享元素改成形状裁切。
  • AppStore.kt 新增 coverShape(随机或某个形状名,默认随机);设置页加形状选择器。随机结果存在播放会话里,重新打开播放页不换。
P3

平板与电视

  • WidePlayer 改成左播放右歌词,加专注歌词模式(VerticalFloatingToolbar)。
  • TvPlayer 换成浮动控制条和新的环境模式,焦点顺序保持不变。
  • AppStore.kt 新增 tvAmbientClock(默认开);设置页只在电视上显示这个开关。
  • PlayerParts.kt 的 LyricsList 加按距离降透明度 / 模糊。
P4

验证

  • :app:compileDebugKotlin :app:testDebugUnitTest。
  • 手机、平板、电视模拟器截图;电视上用方向键走一遍焦点和返回键。
  • API 23 电视镜像上测绘制耗时,确认流光场每帧不超过 4ms;开 TalkBack 检查文案不变。
  • !
    形状会裁掉封面边角大约 8–12% 的面积,封面上的字可能被切到;所以暂停时变成圆角方形看全图。
  • !
    弱 GPU 电视盒子没有 RenderEffect 模糊(API 31 以下),流光场靠 24px 封面放大和径向渐变本身的柔和;如果实测超时,电视上律动降到 30fps 绘制。
  • !
    中文歌名没有宽度轴内置的 Roboto Flex 只含拉丁字形,中文走系统字体,强调只能靠字号和字重。
已确认

四个决定

2026-10-26 确认。括号里是我补的细节和默认值,有不同意见直接改。

1. 封面形状:随机,并提供设置每次切歌从 6 种里随机抽,不和上一首重复(同一首歌再播一次可能换形状)。设置里可以固定成其中一种,默认随机。
2. 封面轮廓旋转:播放时 40 秒一圈暂停时停下并转正成圆角方形;开启“减少动画”时不转。
3. 律动强度:新增柔和 / 标准默认标准;只在“显示歌词背景”选了律动时出现。
4. 电视环境模式时钟:可设置默认显示,只在电视上出现这个开关。