SuperAPI AI 工具集

motion

通用与其它

查看项目

更新于 10-15 22:16

技能介绍

用途与定位 motion 技能负责一套界面动效的决策与落地:先做“是否该动画”的判断,再确定并实现具体动效。它拥有全部时间参数——时长、缓动、弹簧、交错、按压反馈、打断行为与减弱动效处理;其他技能需要动效数值时按名称指向本技能,不在别处重复动效数值。静态样式属于 ui-polish,状态覆盖属于 ux-check。ux-check 中的响应时间预算(100ms 内反馈、超过一秒进进度)属于感知阈值而非动效数值,仍留在那里。Icons8 素材内部的动画(动态图标、Ouch 视频或 Lottie)保留动画师的时间设定,由 icons8 与 ouch 决定何时播放,本技能只管其控件周围的按压反馈。动效令牌(--ease-*、时长)在此定义,可放在独立文件;design-tokens 不拥有也不重命名这些值。

核心规则 先过“闸门”:先看频率与用途,再谈曲线。每天出现 100 次以上(键盘快捷键、命令面板)不做任何动画;每天数十次(悬停、列表导航)接近不可感知或不做;偶发(弹窗、抽屉、提示)用标准动画;罕见或首次(引导、成功、庆祝)才有惊喜预算。由键盘触发的操作一律不加动画。用途须用一个词说出:反馈、空间一致性、状态指示、避免突兀变化、解释(仅营销与引导)或惊喜(仅罕见层级);说不出来就不要做。用户正在阅读的数据不得为风格而移动。

参数 进入或退出用 ease-out,屏上移动或形变用 ease-in-out,悬停与颜色用 ease,恒定运动用 linear;UI 中的 ease-in 始终算缺陷。内置 CSS 缓动过弱,应使用令牌:--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); 时长上按钮按压反馈 100-160ms,提示与小浮层 125-200ms,下拉与选择 150-250ms,弹窗与抽屉 200-500ms,营销与解释可更长。按压反馈用 :active 上的 transform: scale(0.97),transition: transform 160ms ease-out,缩放保持在 0.95-0.98。手势驱动、可打断或需要生命感的场景用弹簧 { type: "spring", duration: 0.5, bounce: 0.2 },bounce 保持 0.1-0.3。分组进入交错 30-80ms,交错仅装饰且不得阻塞交互。

属性、打断与退出 只动画 transform 与 opacity,width、height、margin、padding、top、left 会触发布局。不得从 scale(0) 进入,应 scale(0.9-0.97) 加 opacity: 0。浮层、下拉、提示从触发元素缩放(transform-origin 指向触发器),弹窗例外保持居中。优先百分比位移而非硬编码像素。动效库中应写完整 transform 字符串,x/y/scale 简写会走主线程掉帧。一秒内可被触发两次的元素用过渡而非关键帧。退出方式与进入一致,决定阶段的时序应“慢思考、快响应”。

克制与无障碍 一个编排好的时刻胜过零散效果。自动播放内容在任何交互(含触摸)时暂停,减弱动效下停止,且不得自动移动用户正在阅读的内容(WCAG 2.2.2)。高频交互即时反馈或最多 150ms 的透明度与颜色变化。动效永不是唯一反馈通道。prefers-reduced-motion 意味着更少更温和而非全零:保留有助理解的透明度与颜色过渡,去掉位移。悬停动效需用 @media (hover: hover) and (pointer: fine) 门控。

使用方式与输出 构建时先给代码,再一行说明闸门结果(频率层级与命名用途)与配方(工具、属性、曲线、时长或弹簧)。评审时只报告不修改,删除动画是一等修复,最多 10 条发现,“动效没问题”是有效结论。评审先 grep transition、animation、@keyframes、scroll-behavior、setInterval、scrollIntoView、requestAnimationFrame,再实测:把待评动画放慢十倍观察,可用 document.getAnimations().filter(a => el.contains(a.effect.target)).forEach(a => a.playbackRate = 0.1).;模拟 prefers-reduced-motion;快速连续触发两次确认不重启。报告表列为 位置 | 现状 | 违反规则 | 修复 | 证据 | 严重程度,有 HIGH 则判 Block,否则 Approve,并列出未验证项。

限制 不适用于本身即产品的动效(播放器、画布、游戏循环、动画编辑器);不修改第三方嵌入、vendored 与生成文件。无法渲染页面(机器人墙、无浏览器、构建不运行)或被要求不改动时,可仅从源码评审,但需标注未验证项及原因。