[awesome-opus5-5-videos · UI动效] 中文解读｜PRM-0013｜UI组件一镜到底变形循环

> 本文是关联 PRM-0013 的中文解读，包含忠实译文与单独的制作分析；不是英文/日文原文的替代版本。
> [查看保留的原文](https://github.com/Shanvision-star/liubai-prompt-library/blob/main/bundled-library/entries/PRM-0013/original.md) · [查看 GitHub 固定来源](https://github.com/yihui-dev/awesome-opus5-5-videos/blob/92aee2f586ac0715cb3cbcb6384834f98a33383d/prompts/twoclipping-402193.md)
> 原文 SHA-256：85434958ccdc0c246f5b0b73a6977c6bede956be6e107d19c771285d0f4bf134
> 本次仅翻译与讲解；未安装或执行提示词所列工具，未生成视频，未实测效果。

# UI组件一镜到底变形循环｜中文翻译与制作思路

关联原记录：PRM-0013。作者按来源仓库标注为 @twoclipping；其余同文来源及许可保留在原记录来源说明中。英文原文、署名与固定来源不变。本条为独立中文解读，未执行提示词，未制作或实测动画。

## 中文翻译

以下逐段对应原文，保留原标识、工具名称和数值；制作建议另列于后文。

```text
<inputs>
向我询问：我希望这个形状变成的 8 到 12 个 UI 状态（例如按钮、加载器、播放器、滑块、开关、标签页、图表、命令面板、短暂通知 toast）；采用纯黑白还是一种强调色；以及一首约 120 BPM 的免版税歌曲（例如 Mixkit，可免费商用）。
</inputs>

<direction>
达到 Dribbble 水准的 UI 动效。只有一个形状，绝不切镜：每个状态都是同一个元素改变尺寸、圆角半径和颜色，同时其内部内容伴随短暂模糊而替换。光标通过真实的点击和拖动驱动每一次变化。采用浅暖灰色画布、黑白组件，以及一种简洁的 UI 字体（Geist）。处处使用弹簧运动，最多只允许极轻微的过冲。镜头通过缩放让每个状态占满画面。最后一帧就是第一帧，从而形成循环。
禁止：弹跳式缓动、粒子爆发、辉光、UI 控件外观上的渐变、粗细不一致的图标描边、无事发生的空档，以及任何看起来像模板的东西。
</direction>

<structure>
120 BPM，7 个小节，每一拍都有事情发生。
按钮 → 加载器 → 对勾 → 灵动岛 → 带播放/暂停形变的音乐播放器 → 拖动进度条调整播放位置 → 它变成音量滑块，拖过最大值时会拉伸 → 开关跟随节拍切换 → 开关滑块变成液态的标签页指示条 → 标签页展开成自行绘制的图表，悬停时显示提示气泡 → 它收拢成 ⌘K 命令入口 → 输入文字进行筛选 → 按下 Enter → 短暂通知 toast → 回到按钮。
</structure>

<build>
1. 只用一个 HTML 文件，画面为 1440x1440 的正方形。每一种样式都在 seek(t) 内根据时间计算：不用 CSS transitions，不用定时器，不在帧之间保留状态。
2. 弹簧采用闭式阶跃响应。对于多次改变目标值的数值，每次变化对应一个弹簧，把这些弹簧相加，因此它始终是时间的纯函数。
3. 标签页指示条的两条边缘分别由不同弹簧驱动，使前缘先于后缘向前拉伸。开关滑块使用相同技巧。
4. 拖动采用直接操纵：光标处于按住状态时，根据它的位置计算数值；释放后，从当时所在的位置弹回。
5. 用 numpy 分析歌曲，得到节拍网格，并从小节的第一拍开始。按测得的峰值位置安排每一个 UI 音效。
6. 用 Playwright 渲染：每帧取 4 个子帧，用 ffmpeg tmix 混合，得到带运动模糊的 60fps 输出。
7. 完整渲染之前，先在每一拍渲染一帧。修正任何不对齐节拍网格、拥挤或难以阅读的地方。
</build>

<gotchas>
绝不要给任何会被镜头缩放的元素设置 will-change，否则文字会渲染模糊。形变容器内替换的文字需要各自独立的进入与退出时序，否则会重叠。让最后一帧与第一帧完全相同，包括光标的位置和速度，否则循环会卡顿。
</gotchas>

<start>
先向我询问输入信息，然后在编写任何代码之前，把按节拍网格排列的状态列表展示给我。
</start>
```

## 制作思路（本次分析，非原文要求）

### 目标效果与画面顺序

重点是让观众相信“一个组件一直在变”，并用光标解释每次变化的原因。按钮、播放器、滑块和图表不是互相切换的独立画面，而是同一个容器依次承担不同功能。整条叙事由“点击启动—操作播放器—改变音量—切换状态—查看信息—命令操作—结果通知”闭合回起点。

原文先要求提供 8–12 个 UI 状态，随后又给出包含点击、输入、拖动等动作的较长顺序。实际编排时应区分“组件状态”与“状态内动作”，在写代码前把用户选择映射到节拍表；不要擅自把长顺序删成固定数量。原文规定 7 个小节，但没有规定每小节拍数，因此不能直接把总时长写死为 14 秒。

### 动画方法

把主容器的位置、宽高、圆角和颜色作为连续参数，统一由 seek(t) 决定。这样可直接查看任意时刻，先渲染后面的帧也不会依赖前面的帧。多次目标变化通过叠加闭式弹簧响应表示，避免一帧一帧累积导致不同采样顺序得到不同结果。

表现“弹性”主要靠指示条两端错开的弹簧，以及拖动超限后的回弹。原文同时要求极轻微过冲、禁止弹跳式缓动；可以理解为轻微越过目标后稳定落下，而不是连续夸张弹跳。文字有单独的进出窗口，容器先开始变形，旧内容退出后新内容再进入，以免两套文字叠在一起。相机缩放和光标轨迹也需放在同一时间表中，不能只让组件按节拍运动。

### 工具与素材

原文明示：单个 HTML 文件、Geist、numpy、Playwright、ffmpeg 的 tmix；约 120 BPM 的免版税歌曲；用户指定的 8–12 个状态及黑白/强调色方案。原文没有指定必须使用 Canvas、SVG 或 GSAP，也没有指定音效的制作来源。

可选建议：先整理一套描边一致的图标和逐状态文字清单，并为 UI 音效列出“动作—音频峰值—对应节拍”的表。歌曲的“免版税”是原文素材要求，选定具体曲目时仍应核对该曲目的使用条件；本次没有取得或使用任何歌曲。

### 落地步骤与验收点

1. 先收集状态、颜色、歌曲，再按原文要求出节拍状态表。表中分别标注点击/按住/释放、容器形变、文字切换和镜头缩放，确认每拍都有事件。
2. 先完成静态状态和连续的主容器形变，再加入播放器、滑块、标签指示条及图表。验收时逐项核对顺序，尤其是进度拖动、超限拉伸、悬停提示、⌘K 筛选和 toast。
3. 接入光标与拖动数值的对应关系，检查按住时控件是否跟随光标、释放时是否从当前位置回弹。不要让光标先松开而控件仍表现为被拖动。
4. 按原文先出每拍一帧的检查图，查拥挤、文字重叠、节拍偏移及镜头缩放后的字形清晰度。可选建议：再查看拖动释放和内容切换附近的相邻帧，因为单张节拍图可能漏掉瞬时错误。
5. 依原要求用 4 个子帧混合并以 60fps 输出；比较循环头尾的主形状、文字、光标位置与运动方向/速度，避免视觉接缝。上述均为待执行的验收方法，本次没有渲染结果。

### 如何替换后复用

可把播放器、音量控制、图表和命令面板替换成自己的产品状态，但保留“同一个容器连续变形、操作先于反馈”的结构。品牌替换应同时覆盖字体、强调色、图标描边和界面文案；真实数据变化后重新检查图表与提示气泡的占位。若改用其他音乐，应重新测节拍并排时序，不能只替换音轨而保留旧事件时间。