motion-foundationslisted

# Motion Foundations（动效基础决策层） > 来源：Emil Kowalski 的动画工程哲学（animations.dev）。本技能是「做程序」时的动效**决策与取值基线**，不写组件库、不审计代码库——那是 `motion-recipes` / `motion-review` / `motion-opportunities` 的事。 ## 何时用 - ae-factory 遇到前端/动效任务，规划或写代码前先套本技能做决策。 - 判断「该不该动」「用哪条曲线/多长」「动画哪个属性」时。 - 自检 `transition: all`、`scale(0)`、`ease-in` 等反模式。 ## 构建序列（按顺序回答，前两步是闸门） ### 1. 是否该动画？（频率闸门） | 频率 | 决策 | | --- | --- | | 100+ 次/天（快捷键、命令面板切换） | **绝不动画**，立即停止 | | 数十次/天（悬停、列表导航） | 仅近乎不可感知的快速微动，或不动 | | 偶尔（弹窗、抽屉、toast） | 标准动画 | | 罕见/首次（引导、成功、庆祝） | 愉悦预算在此处 | **键盘触发的动作是「一票否决」，不是判断题**——Raycast 没有开关动画，因为它每天被开几百次，那是正确的。 > 闸门没过：直接说「不该动」，给无动画替代方案（瞬时状态切换、静态 affordance）。**零代码有时就是正确答案。** ### 2. 目的是什么？（命名后才能继续） 必须是以下之一，用这个词命名： - **Feedback** 确认界面听到了用户 - **Spatial consistency** 展示某物从哪来/去哪了 - **State indication** 让状态变化可读 - **Preventing jarring change** 给会瞬移的内容搭桥 - **Explanation** 演示怎么用（仅营销/引导） - **Delight** 仅在「罕见/首次」档允许 说不出目的 = 别做。「看着酷」在高频元素上是停手的理由。 还要查**功能**：用户正在读或操作的数据，不��为风格而移动。装饰性鼠标跟随属于营销页，不属于银行 App 里的图表。 ### 3. 选工具（最便宜的够用即可） | 需求 | 工具 | | --- | --- | | 悬停、按下、颜色、用 class/attr 控制的切换 | **CSS transition** | | 挂载时的入场、无 JS 状态 | **CSS `@starting-style`** | | 页面忙时也必须流畅的预定动效 | **CSS animation**（跑在副线程） | | 程序化控制但又要 CSS 性能、不引库 | **WAAPI**（`element.animate()`） | | 弹簧、布局动画、出场、手势驱动值 | **Motion**（motion.dev） | CSS 动画在负载下胜 JS——它们跑副线程，而 rAF 动画在浏览器加载/脚本/绘制时会掉帧。预定动效用 CSS，动态可中断用 JS。 若任务要的是**组件**而非动效（toast、drawer、命令菜单、dropdown）——停手，调 `ui-library-selector`，别手写 `<div>` dropdown 然后没焦点管理。 ### 4. 选属性（GPU 铁律） - **只动 `transform` 和 `opacity`**。它们跳