作者 Shule用 Icon Morph 让图标自动变形
打开菜单、复制完成、开始播放，图标总在离手指最近的地方回应操作。状态切换做得好，用户能顺着图标的动作看到界面接下来会发生什么。
这组 Demo 展示了三种常见变化：菜单收成 More，下载落成 Check，播放变为暂停。新的状态仍由原来的几根线组成，变化就发生在同一块画布里。
三组预先写好笔画对应关系的图标
从这几根线出发，再看看线条无法继续对应时，图标和形状还能怎么动。
每根线都有自己的去处
一枚线条图标可以看作几根有身份的笔画。菜单、More、下载和 Check 外形不同，却都能放进同一块画布，并由三条线表达。状态变化时，每条线的两个端点沿着各自的路径移动。
Rig 是一组图标共用的结构约定。它记录坐标网格、Slot 数量、每个 Slot 的元数，以及每枚图标在各个 Slot 上的路径。Slot 0 在 Menu 里是上方横线，到了 Check 仍然是 Slot 0；某个状态用不到某个 Slot 时，还要记录停放位置。对应关系写进图标数据后，播放时不必重新搜索哪条线接哪条。
Menu 变为 Check 时，Rig 会先为每一笔安排去处：上方横线接住短边，中间横线转成长边，剩下的一笔收进已有线条。起点和落点都清楚，Morph 的动作才不会散。若要在设备上即时求解任意两枚图标，还需要整理结构、统一采样、建立对应关系，再求出每一笔的姿态。下面以 Menu → Close 为例，用五个步骤走一遍完整的 Rig 流程，直到生成中间帧。
所有命令都转成 cubic，两条路径才能比较
直线的两个控制点落在三分之一和三分之二处，所以外形暂时不会变化。
图标集合固定时，前四步可以交给构建工具，输出已经配好的 Rig 或关键帧。页面拿到结果后只需要推进动画进度；使用可打断的运行时驱动时，用户再次点击，动画还能从当前位置继续。
线条对不上，就直接切换图标
锁扣沿原来的轮廓打开
锁身保持不动，锁扣只调整端点和位置。
线条数量和结构都变了
方格边框找不到对应笔画，中间帧容易变形。
锁住变为解锁时，锁身保持不动，锁扣沿着原来的轮廓滑开；网格视图切成列表时，方格边框却很难逐笔找到搭档。前者共享一副骨架，后者直接切换两枚完整图标会更干净。
轮廓越接近、笔画对应越清楚，中间帧越自然。差异太大时，Morph 仍然能运行，只是过渡更容易变形。
残差 · Residual
≤ 0.20完成位置、旋转和缩放对齐后，剩下的形状差异。越接近 0，两枚图标越像同一副骨架。
停放比例 · Parked ratio
≤ 50%找不到搭档、只能收起的笔画占比。比例越高，两枚图标的绘制复杂度越不对称。
Outline 和 Filled、太阳和月亮，通常也各有一套绘制结构。强行对应会让中间帧出现穿插、拉丝或突然变粗。Icon Swap 直接让旧图标离开、新图标进入。
Crossfade 让新图标从缩小和模糊中进入，旧图标同步缩小、淡出。两枚图标在同一个视觉中心短暂重叠，切换会更自然。
参数化形状如何连续形变
Blob、星形和三角形这类填充图形，可以从轮廓入手。只要采样点的数量一致、顺序对应、方向相同，每个点在状态之间移动，外轮廓便会跟着变化。GSAP 的 MorphSVG 会把两条路径转换成可插值的数据，补足锚点数量并调整点位顺序，再生成连续的中间帧；复杂轮廓仍要检查自动匹配是否合适。
Demo 里变化的是一个填充轮廓。同一条路径放进 clip-path 或 mask 后，也可以控制卡片、头像和缩略图的边界。
这种方式很适合 AI 思考中的状态容器、结果卡片、上传进度和焦点提示：形状在变，但内容仍然留在同一块空间里，反馈会比单纯换颜色更有存在感。
Shape Morph 还可以继续组合：让几块形状共同组成一个角色，或让多个同色形状在靠近时融合成一整块表面。下面两个案例分别展示了这两种做法。
复杂变化需要人为编排
点赞成功、支付完成和徽章解锁这类关键反馈，往往需要设计师在 Lottie 或 Rive 中安排关键帧与节奏，代码只负责触发、暂停和反向播放。
点赞完成
关键帧已经写进动画文件，进入视口后循环播放，也可以随时暂停。
需要更明显的空间变化时，可以让同一组粒子先排成网格，再交替组成 3D 几何和二维图标。R3F 负责推进粒子坐标，球体、爱心、立方体和勾选都由这批粒子组成。
粒子重组
粒子在 3D 几何和二维图标之间持续重排。
粒子可以显示成圆点、圆环、菱形、ASCII 字符或 3D 小模型，再配合不同的材质、颜色和运动规则。它们聚合、散开或重新排列后，也能继续组成生成艺术，让同一套系统产生更多变化。
按状态选择变化方式
先判断两种状态共享什么，再选变化方式。每一行右侧列出可以直接尝试的工具。
选择方式线条形变Icon Morph
选择方式图标切换Icon Swap
选择方式轮廓形变Shape Morph
选择方式编排动画Authored Motion
拿不准时，把这四种方案都放回真实界面试一遍，比较哪一种最能说明刚才的操作、现在的状态，以及接下来会发生什么。
继续深入
文中关于 Rig、Slot、笔画对应和停放的部分，主要参考了 Morphrig。想继续追究一条线为什么这样配，或自己搭一套 Icon Morph 系统，可以从这份手册继续读。