Seenry Motion 是一个面向界面动效的技能，用于构建、审查或研究界面动效，覆盖按压反馈、菜单、提示框、对话框、抽屉、Toast、手风琴、标签页、页面过渡与共享元素过渡等场景。它的核心主张是：动效存在的意义是解释变化——某物从哪里来、输入做了什么、界面当前处于什么状态。
用途
Seenry Motion 把动效决策拆成一个必须先走完的构建序列，其中前两步决定是否要写任何代码：先判断“到底该不该动”，再给动效命名一个目的。除这两步外，序列还包括选择成本最低的合适工具、挑选属性、选择曲线与时长或弹簧、规划打断与退出、随动效一起交付减少动效与输入门控。
主要能力
- 频率门控：按用户看到该交互的频率决定动不动。每天 100 次以上（命令菜单、键盘快捷键、方向键列表导航）不动，立即切换；每天几十次（悬停、标签、开关）只做短暂的不透明度或颜色反馈，或不做，绝不延迟已接受的状态；偶尔出现（菜单、对话框、抽屉、Toast）用标准动效；很少出现（引导、首次成功、空到满的时刻）可以留出个性空间。键盘触发的操作永远不等动效。
- 目的命名：要求用一个词说明目的：反馈、方向感（从哪来/到哪去）、状态、连续性（避免突兀跳动）、解释（仅营销与引导）、愉悦（仅稀有时刻）。没有目的就不做动效。用户正在阅读的数据不会为了样式而移动。
- 工具选择：按需求选最便宜的工具——悬停/按压/颜色/类或属性切换用 CSS transition；挂载进入、display: none 前退出、原生 dialog 与 popover 用 CSS transition 加 @starting-style 与 allow-discrete；高度到 auto 用 interpolate-size: allow-keywords 或 grid 0fr → 1fr；路由变化、列表到详情、形变指示器用 View Transitions API；滚动关联效果用 animation-timeline: view() / scroll()；程序化、可取消且不引入库用 Web Animations（element.animate）；带速度的弹簧、布局动画、手势、React 中的存在感用 Motion（motion.dev）；整个组件（Toast、抽屉、命令菜单、选择器）用维护良好的库。
- 属性约束：只动 translate、scale、rotate、opacity、clip-path、filter。绝不从 scale(0) 进入，从 0.95–0.97 加 opacity 0 开始；弹出层从触发器的方向缩放（transform-origin 在触发器一侧），对话框从中心缩放；百分比平移（translate: 0 100%）按元素自身尺寸移动。
- 曲线与时长表：按压反馈 100–160ms、提示框与小弹层 120–200ms、菜单/下拉/选择器 150–250ms、对话框 200–250ms、抽屉 350–500ms、跨屏移动与形变 250–400ms、悬停颜色/背景/边框沿用现有状态令牌（示例套件用 180ms 与 cubic-bezier(.25,0,.06,1)）、进度/跑马灯/按住确认填充按工作时长用 linear。
- 自定义曲线：--ease-out: cubic-bezier(0.23, 1, 0.32, 1)，--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1)，--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1)。界面动效禁用 ease-in，因为它恰好延迟了用户正在注视的时刻。产品界面优先 300ms 以内，抽屉行程更长需要理由；退出通常比进入快约 20–30%，除非需要保持直接操控或空间关系。用户拖拽、甩动或可中途反向的用弹簧：Motion {type: "spring", duration: 0.5, bounce: 0.2}，产品 UI 用 bounce 0，活泼场景不超过 0.3。
- 打断与退出规划：可逆属性变化优先用 CSS transition，因为它会从当前值重新定向；需要 WAAPI 时捕获当前渲染状态、取消或重定向自有动画，并防止过期的完成回调生效。第二次输入应反转或替换旧请求而不是排队。新逻辑状态立即发布，可另设呈现状态保留退出画面。
- 质量检查启发式：在进入和退出期间重复输入（含间隔 50–150ms）测试；相关标签/过滤/状态可共用一个网格单元（display:grid、grid-area:1/1）过渡不透明度或小幅平移，非活动内容移出焦点顺序与无障碍树；避免意外空白间隔或可读性差的文字交叠；标题/头像/封面移动时避免重复绘制，目的地先隐藏、旅行者落地后再撤掉临时副本；标签要与结果一致（“Mark paid” 变“Paid” 跟随同一已接受状态）；可取消的序列（打字演示、分阶段揭示、重播）共享挂起步骤的所有者，过期超时不得恢复暂停序列；交互稳定后释放已完成的有限 WAAPI 动画，fill:forwards 不得持续覆盖后续状态变化。
- 接近 9 分的建议：动效评分中 7 分是正确但通用，8 分明显高级，9 分达到 Apple 或 Linear 级别的独特性。建议一次只处理一个组件并用 --labels "<Row>" 单独评分到 9；应用每一项修复而不只是标题项；修复后又复现的问题是结构性的（如共享元素应保持相对排布，标题在封面下方，详情页仍在下方）；任何拍摄时刻（30–320ms）都不得出现空白帧；每个组件只保留一个精心构思的想法；关闭方式要匹配流程——对话框看有意义操作、安全取消路径、Escape 行为与焦点返回，不要求多余的关闭按钮，菜单与弹出层不需要关闭按钮（选择、外部点击、Escape 即关闭）；整区替换的界面把 Close 放在头部右上角；单次评分运行不算分数，需两次独立运行都达到 9 才算接受。
- 减少动效与输入门控：在 prefers-reduced-motion: reduce 下移除移动、视差、模糊与循环，保留有助于理解的短暂不透明度变化；普通控件的悬停保持静止，只改色调或描边，不改位置、缩放或布局；悬停反馈用 @media (hover: hover) and (pointer: fine) 门控；每个有动效的状态变化都要留下静态线索（标签、图标、颜色）。
- 配方与可运行资产：提供按压反馈、菜单与弹出层、提示框、对话框、抽屉、Toast、手风琴、交错进入、标签指示器、页面与共享元素过渡、滚动揭示、图标切换、数字变化、按住确认、拖拽关闭（含速度投影与橡皮筋）、交叉淡化遮罩、主题切换与首帧抑制等配方，原生 CSS 配方在 Chromium 中由包测试覆盖。可运行资产按变更类型给出聚焦路线：操作菜单或短状态标签、流内展开或几何变化、聚焦模态任务、变化数字或图标、实时语音输入输出、加载或流程存在感、解码图片或表现性材质、设计新交互组件、Toast 或横幅堆叠、偶发完成里程碑、选中标签或有序页面变化、滚动或协调系统。
- 禁止清单：100+/天或键盘操作上的动画改为瞬时；不用 transition: all 而是命名属性；不从 scale(0) 进入；UI 不用 ease-in；无理由的产品 UI 动效不超过 300ms；弹出层不从中心缩放；重复触发的交互不用不可控关键帧；不动 width/height/top/left/margin 而是用变换、网格轨道或 interpolate-size 处理高度；悬停不移动或缩放普通控件；必须有减少动效变体；长列表逐项进入用 30–50ms 交错且总时长约 300ms 封顶，或不做；动效不能是状态变化的唯一标志；时长令牌不得把缓动放错位置导致 transition-duration 整条失效，需在计算样式中确认 transitionDuration 不是 0s；布局规则上的 display 不得压过 [hidden] 属性，用 :not([hidden]) 并检查隐藏项既不绘制也不可 Tab 聚焦；颜色变化不要让第二个形状在形变表面上交叉淡化。
- 输出要求：写完代码后用几行报告：门控结果（频率与目的，或为何不动）、用料（工具、属性、时长、曲线或弹簧）、检查了什么（正常速度、DevTools Animations 10% 速度、快速重复、反向、键盘、减少动效、手机）。
使用方式
当需要匹配给定参考时，要按正常速度与有用的中间帧检查播放，而不只看端点；静态图片无法确定时序、打断或键盘行为，没有播放素材就实现一个方案并在本地测试。录制阶段检查是把源检查点与运行中的浏览器动画对应起来，状态跳变只能验证端点而非时序。验证可从静态扫描开始，无需浏览器且远快于 1 秒：node ../seenry/scripts/motion_scan.mjs <project>，它会标记偏离令牌的时长、延迟与曲线、浏览器默认与 linear 缓动、transition: all、布局属性过渡、大于 20ms 的交错步进以及缺失的减少动效分支，并给出每个问题最近的令牌。
适用场景
适合前端开发者与设计工程师在实现或审查界面动效时使用，尤其适用于需要明确动效决策依据、控制时长与曲线、处理打断与退出、兼顾减少动效与键盘可用性的项目。
限制
资料仅提供该技能的说明文本，未说明其具体安装命令、支持的框架版本范围、收费方式或价格、实际评分工具的获取途径与准确性保证，这些内容暂未提供。所提供的评分与检查条目是设计启发式，不保证评分结果。