Flow 界面动效实现

动效不是装饰，而是交互反馈

按钮悬停没层次、模态弹出生硬、滚动入场抢布局、骨架屏无限转圈——这些往往不是「缺设计」，而是缺可落地的动效实现：属性选错会拖垮 INP，触发布局的动画会直接贡献 CLS，而忽略 prefers-reduced-motion 在欧盟无障碍合规（EAA / WCAG 2.1 AA）下已是硬约束。

技能如何工作

Flow 把每次任务收敛到一个明确的动效改进，按 SURVEY → PLAN → VERIFY → PRESENT 推进：先确认框架、范围与减动画路径，再定时长（通常 150–300ms）、缓动与仅合成器友好的属性（transform、opacity、filter、clip-path），最后做无障碍与性能核对再交付代码。

子命令可按场景切入：默认 hover（微交互），另有 loading、transition（模态/路由）、gesture、spring、scroll（滚动触发揭示，区别于滚动驱动擦除）、parallax（层数与偏移有硬预算）。现代 CSS 路径包括 View Transitions、@starting-style、滚动时间线，以及 Chrome 129+ 的 interpolate-size / calc-size() 做固有尺寸展开；框架侧倾向 Motion v12 或复杂时间轴用 GSAP。

边界与注意点

• 每个视图建议 2–3 种动效类型，避免视觉噪音；动效应服务状态传达，装饰性动效可降级。
• 不用动画阻塞操作；除加载指示外避免无限循环；滚动上别动画 width/height/top/left，用 translate 代替。
• 广泛 UX 评审找 Palette，动效方向系统找 Vision，纯打包/非动画性能找 Bolt；需要浏览器或 a11y 验证可交接 Radar。
• 重型库（Three.js、Lottie）、跨多表面编排、或实质改变内容感知的视差，应先对齐范围再动手。