图标形变 · Icon Morphing
英文：Icon Morphing
动效与交互难度：入门 ★
🗣️一句话大白话
图标在不同状态间平滑形变：汉堡菜单⇄关闭叉、播放⇄暂停、箭头⇄加载。状态切换的“无缝感”。图标形变常用 SVG 路径动画（起终点路径点数一致）或描边动画。告诉 AI“汉堡图标点击后形变为关闭叉，300ms”即可。要点：形变要在同一坐标系内（几何对齐），否则像“跳变”；路径点数不一致时可退化为 fade+旋转过渡。
🎬真实场景
菜单按钮、播放器控制、展开/收起、收藏状态切换
📮你可以这样说
「【图像模型版】[汉堡菜单] 点击后三条横线平滑形变为关闭叉（中间横线旋转 45°，上下横线位移），300ms 先快后慢；再点恢复。 【HTML/CSS/JS 版】[图标] 用 SVG path 动画（d 属性过渡，路径点数一致）或三根线 transform：中线 rotate(45deg)、上下线位移+旋转，transition 300ms ease-out。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：形变=替换图标；形变是同一图标“形状连续变化”
- ▸路径点数不一致会闪跳，需用同点数路径或退化方案
🚫什么时候别用
- ✗图标含义完全不同（非状态切换）时用替换+淡入
🧩常见变体
汉堡⇄叉播放⇄暂停箭头⇄加载展开⇄收起
💡小贴士
- ✦同点数 SVG path 才能平滑形变；否则退化为淡入替换
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（下篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗