[awesome-opus5-5-videos · UI动效] 中文解读｜PRM-0021｜日语UI组件变形与节拍循环

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

# 日语 UI 组件变形与节拍循环｜中文翻译与制作思路

关联原记录：PRM-0021。独立来源组：awesome-opus5-5-videos · UI动效。

本记录是原日文提示词的中文译文与独立讲解；原文、作者及来源以 PRM-0021 为准。状态：未执行、未实测，以下制作与验收均为后续使用说明。

## 中文翻译

<inputs>
向我询问以下 3 项：图形要变成的 8～12 个界面组件（例如：按钮、加载中的显示、音乐播放器、音量滑块、开/关切换开关、标签页、图表、通过 ⌘K 打开的搜索框、短暂弹出的通知）；配色是完全黑白还是加入 1 种强调色；以及一首约 120BPM（每分钟 120 拍）的免版权费用歌曲（例如 Mixkit，免费商用）。
</inputs>

<direction>
制作能登上设计师作品网站「Dribbble」水准的精致界面动效。只有 1 个图形，绝不切换场景。所有状态都通过同一个图形改变大小、圆角和颜色并持续变形来呈现，内部内容则通过短暂模糊进行替换。光标通过真实的点击和拖拽触发所有变化。背景是带暖调的浅灰色，组件为白色与黑色；界面文字使用日语，日文字体为 Noto Sans JP，英数字和符号使用 Geist（1 种字体）。所有运动都采用像「弹簧」一样自然的运动，越过目标的幅度（回弹）最多只能很小。相机通过缩放，让每个状态充满画面。最后一帧与第一帧相同，从而形成循环。
禁止：蹦跳式运动、粒子飞散效果、发光晕染、组件上的渐变、图标描边粗细不一致、没有任何变化的无用停顿，以及所有看起来像套用模板的东西。
</direction>

<structure>
120BPM，7 小节（约 14 秒），每一拍都有事情发生。
按钮 → 加载中的显示 → 对勾 → 类似 iPhone 灵动岛的显示 → 播放/暂停图标平滑变形的音乐播放器 → 拖动播放进度条的滑块来改变播放位置 → 变成音量滑块（拖动超过最大值时像橡胶一样拉伸） → 开/关切换开关随节拍切换 → 开关的滑块变成像液体一样运动的标签页选中指示器 → 标签页展开，变成自行绘制线条的图表（光标悬停时出现提示气泡） → 折叠成 ⌘K 搜索框 → 输入文字筛选候选项 → Enter → 短暂弹出的通知 → 回到按钮。
</structure>

<build>
1. 只用 1 个 HTML 文件，正方形 1440x1440。所有外观都在 seek(t)（传入时间 t，即可确定该瞬间画面的函数）中根据时间计算。不要使用 CSS transitions（自动动画功能）或定时器，也不要在帧与帧之间携带状态。
2. 弹簧运动采用能够直接用公式求出的形式（闭式阶跃响应）。一个值的目标多次变化时，就把每次变化分别计算出的运动相加。这样在任何时候，值都只由时间决定。
3. 标签页的选中指示器：左右两端用不同的弹簧驱动，让前进方向的前端先于后端伸长。开关滑块使用同样的方法。
4. 拖拽采用直接操作：光标按住时，从光标位置计算数值。松开后，从当时所在的位置弹回。
5. 用 numpy（计算工具）分析歌曲，确定各拍的位置，并从小节的第一拍开始。操作音按测得的声音峰值位置对齐。
6. 用 Playwright（自动操作浏览器并把画面输出为图像的工具）绘制。每帧输出 4 个子帧，用 ffmpeg（制作视频的工具）的 tmix 叠合，加入 motion blur（运动残影），输出为 60fps。
7. 输出完整片段前，先每拍只输出 1 帧进行检查。修正偏离节拍、布局拥挤或难以阅读的部分。
</build>

<gotchas>
绝不要给被相机缩放的元素添加 will-change（浏览器绘制设置）。添加后会使文字模糊。在变形容器内替换的文字，需要各自独立的进入与退出时序，以防相互重叠。最后一帧必须与第一帧完全一致，包括光标的位置和速度，否则循环会卡顿。
</gotchas>

<start>
先向我询问输入内容，然后在编写代码前，展示按拍排列的状态清单。
</start>

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

### 目标效果与状态顺序

核心是让观众始终相信「同一个组件正在改变用途」。按钮、播放器、滑块、开关、标签页、图表和搜索框共享同一个外壳，内部内容在变形期间交接，而不是切到另一张画面。输入阶段要求的是 8～12 个组件状态；原文给出的长序列还包含加载、拖动、输入、确认等中间动作，制作状态表时应把组件状态和操作步骤分列，避免把每个箭头都误算成一个独立组件。

参考顺序先从简单的按钮和加载反馈开始，进入播放器与拖拽，再通过滑块、开关、标签指示器连接到图表，最后经搜索、确认、通知回到按钮。这样的安排让相邻状态具有可继承的外形：滑块的圆形把手可以成为开关的把手，开关的把手又可以拉长成为标签指示器。

### 动画方法

把外壳的位置、宽高、圆角和颜色视为随时间变化的属性，将各状态之间的目标值变化写成闭式弹簧响应的叠加。这样 seek(t) 可以直接得到任意时刻的图像，而不用先播放前面的帧。拖拽阶段应由光标位置直接控制组件数值；释放瞬间再接入回弹，避免组件在按住时自行滞后。

标签指示器和开关把手的两端分别求值，形成「前端先走、后端追上」的拉伸。内部文字、图标另设出入时间，使旧内容退场后新内容才进入。相机跟随当前组件调整构图，但运动幅度应服务于组件可读性。原文同时要求小幅越界与禁止蹦跳，可以理解为允许一次克制的过冲，避免明显连续弹跳；具体弹簧参数并未给定，不能把某组参数冒充原文要求。

### 工具与素材

原文明示：HTML、seek(t)、闭式弹簧计算、numpy、Playwright、ffmpeg 的 tmix；日语 UI 使用 Noto Sans JP，英数字和符号使用 Geist；需要约 120BPM 的歌曲、组件状态和配色输入。Mixkit 是原文列出的歌曲来源示例。

可选建议：先准备一份状态表，列出每个组件的文字、图标、外壳尺寸、光标目标和节拍位置；图标统一描边规则。具体歌曲的使用条件应随实际选曲记录，不把来源站点的名称视为对每首作品的统一授权。原文没有指定 Canvas、SVG 或 GSAP，选择哪种绘制方式属于实施选择。

### 落地步骤与验收点

1. 收齐 3 项输入，先交付按拍排列的状态清单，再编写代码。保留 120BPM、7 小节、约 14 秒的原始节奏描述；音乐分析后再据实际拍点排布动作。
2. 先制作所有静态状态，确认日文内容及字体能正确显示，再把相邻外壳连接成连续变形。此时重点检查布局和内容交接，不先堆叠音效。
3. 加入点击、悬停、拖动与释放轨迹，并让数值、提示气泡和光标动作一致；不让滑块在拖拽过程中脱离光标。
4. 加入相机运动及音频，按测得的声音峰值对齐操作反馈。用每拍 1 帧的预览检查拍点、拥挤和可读性，这是原文明示的全片导出前检查。
5. 按每帧 4 个子帧制作运动模糊，输出 1440x1440、60fps。检查循环接缝的组件状态、文字、光标位置与速度；检查缩放文字未因 will-change 产生模糊、图标线宽一致、没有禁止的光晕或渐变。

补充验收建议：同一时间点先后独立调用 seek(t)，比较画面是否一致，以发现计时器或帧间状态依赖。这是对原文确定性要求的检查办法，未在本次实际运行。

### 替换品牌、文案与数据复用

可保留组件连接关系，替换播放器名称、图表数据、搜索候选项、通知文字及强调色。替换后应重新检查文字长度、图表轴范围与光标目标，不能只换字符串而沿用错误的命中位置。

这份中文译文仍忠实保留「成片界面使用日语」的要求。若要制作中文界面，应将语言与字体改动作为使用时的明确改编，并重新检查字体覆盖、字重及布局；它不是本次翻译自动产生的新要求。