从“做个容器变形”到“说清变形的规则”

容器变形动效看似都是“变大变小”，但真要稳定生成，需要把变形规则说清楚。

7 种容器变形动效

1. 圆点变胶囊（Circle to Pill）

适用场景：需要很小的入口来承载即时状态，如灵动状态、快捷操作、实时进度。

变形过程：从圆点开始，以中心为锚点，向两侧水平展开。

内容出现顺序：图标保持连续，文字和进度依次出现，最后停成可读胶囊。

与 AI 描述：“从圆点开始，以中心为锚点向两侧展开；图标保持连续，文字和进度依次出现，最后停成可读胶囊。”

2. 胶囊展开为信息卡（Pill to Card）

适用场景：单行状态不够，需要补充详情与操作，如通知详情、结果反馈、快捷任务。

变形过程：胶囊先增加高度，再补充宽度，向下展开成卡片。

内容出现顺序：保留原图标和标题，再依次露出正文、时间与按钮，避免内容突然跳出。

与 AI 描述：“胶囊标题位置保持连续，详情向下展开；保留原图标和标题，再依次露出正文、时间与按钮，最终停成信息卡。”

3. 紧凑态展开（Compact to Expanded）

适用场景：同一功能需要在简洁条和完整控制面板之间切换，如播放器、任务进度、控制中心。

核心原则：保持同一个容器和内容身份不变，只扩展可操作区域。

变形过程：点击展开后，封面、进度和快捷操作重新排位，最后停在完整面板。

与 AI 描述：“保持同一个容器和内容身份；点击后扩大操作区，让封面、进度和快捷操作重新排位，最后停在完整面板。”

4. 圆角形态过渡（Corner Radius Morph）

适用场景：容器大小基本不变，但要从轻量提示切换成正式结果，如状态确认、结果反馈。

变形过程：容器宽高保持不变，只改变圆角。四个角从全圆逐步收紧为卡片圆角。

同步变化：边框、底色和结果状态同步稳定下来。

与 AI 描述：“容器宽高保持不变；把四角从全圆逐步收紧为卡片圆角，边框、底色和结果状态同步稳定。”

5. 尺寸变形（Size Morph）

适用场景：内容层级不变，只想放大当前重点，如标卡、数据详情。

变形过程：从原位置（左上锚点）向右下改变宽高。

内容处理：内部元素保持比例和锚点，辅助数据随空间出现，结束时突出主数值。

与 AI 描述：“从原位置向右下改变宽高；内部元素保持比例和锚点，辅助数据随空间出现，结束时突出主数值。”

6. 内容重排（Content Reflow）

适用场景：容器变宽或变窄后，文字和按钮不能继续挤在原位，需要跟着可用空间重新排布。

变形过程：同一组内容重新组织版式，如从单列上下结构平滑切成双列左右结构。

核心原则：保持元素身份和阅读顺序。

与 AI 描述：“容器变宽时，让标题、说明、状态和按钮从上下结构平滑切成左右结构，保持元素身份和阅读顺序。”

7. 反向收回（Reverse Collapse）

适用场景：任务完成或信息读完后，需要沿着刚才的路径回到最小入口。

变形过程：先收起次要按钮和正文，再缩短卡片与胶囊，最后沿原路径回到圆点。

关键细节：保留完成标记。

与 AI 描述：“先收起次要按钮和正文，再缩短卡片与胶囊，最后沿原路径回到圆点，并保留完成标记。”

容器变形的四个维度

虽然都叫容器变形，但差别集中在四个维度：

• 起点与终点：从什么形态开始，到哪个形态结束。
• 变化方向：横向、纵向，还是同时改变宽高。
• 内容何时出现：是依次出现，还是重新排位。
• 保持还是收回：完成后停住，还是沿原路径收回。

知识小结：快速对照表

知识点与操作要点

七个动效的对比维度