SuperAPI AI 工具集

morphing-icons

通用与其它

查看项目

更新于 10-16 00:20

技能介绍

用途:构建可在任意图标之间真实形变(morph)切换的图标组件,而非交叉淡入淡出。其核心约束是每个图标恰好由 3 条 SVG 线组成,因此任意两个图标可以无缝形变。

主要能力与结构:每条线由 x1、y1、x2、y2 和可选 opacity 定义;少于 3 条线的图标使用 collapsed 常量(位于 14x14 viewBox 中心、长度为 0、opacity 为 0 的折叠线)补足。图标定义为固定 3 条线,可带 rotation 和 group。共享 group 的图标切换时平滑旋转,例如加号与叉号(0 度与 45 度)、四个方向的箭头;不属于同 group 的图标切换时旋转瞬间跳转。旋转建议使用弹簧物理(useSpring),默认过渡推荐缓动 [0.19, 1, 0.22, 1]、时长 0.4。

实现规则:必须恰好 3 条线;未使用的线用 collapsed 而非省略或 null;所有图标共用同一 viewBox(推荐 14x14);旋转变体必须共享 group 与基础线;同 group 旋转用弹簧,非同 group 用 jump;需通过 useReducedMotion 尊重 prefers-reduced-motion;线条使用 strokeLinecap="round";SVG 加 aria-hidden="true"。常见模式包括两线图标(check、minus 等用折叠线)、三线图标(menu、asterisk、play)和点状图标(more、grip 用零长度线)。审计输出格式为 file:line - [rule-id] 描述,并附规则计数与严重级别汇总。

适用场景:图标按钮、状态切换、需要强调形变连续性的交互组件。限制:资料未提供具体安装命令、依赖版本、许可证或性能数据;示例基于 React 与 Motion 库,其他框架的适配方式暂未提供。