用途:作为动效设计的基础规范,被每次创意类技能调用,提供简洁规则,深入内容放在 references/ 目录。
主要能力:给出时长规则(微交互 100-150ms、UI 过渡 200-300ms、页面/路由过渡 300-500ms、滚动驱动/3D 按进度不设固定时长),并强调频率越高动画越短越细微。缓动速查表规定进入用 ease-out/spring、退出用 ease-in、状态间移动用 ease-in-out、滚动同步用 linear/none、活泼用欠阻尼 spring、利落 UI 用 cubic-bezier(0.2, 0, 0, 1),且退出总比进入更含蓄。还提供 Web、SwiftUI、Compose 的原生缓动等价写法。
无障碍:强制尊重减少动态偏好,列出各平台 API(Web CSS 的 @media (prefers-reduced-motion: reduce)、Web JS 的 window.matchMedia、SwiftUI 的 @Environment(.accessibilityReduceMotion)、UIKit 的 UIAccessibility.isReduceMotionEnabled、Compose 借助 Settings.Global.ANIMATOR_DURATION_SCALE 的自定义 helper),并给出 CSS、SwiftUI、Compose 示例。其他要求包括焦点指示器不得被动画隐藏、动画内容每帧需满足 WCAG 对比度、循环动画需提供暂停机制。
通用禁止规则:不得动画 width/height/top/left(会触发布局重算导致卡顿),不得缩放到 0(最小保留如 0.95 并配合透明度),进入不得用 ease-in,UI 交互不得超过 500ms,不得跳过 prefers-reduced-motion。
性能清单:只动画 transform 与 opacity,谨慎使用 will-change 并在动画结束后移除,JS 动画优先 requestAnimationFrame,滚动驱动优先 CSS animation-timeline 再 IntersectionObserver 再 scroll 监听,并在低端设备(DevTools 4 倍 CPU 节流)测试。
使用方式:按需加载子技能,如缓动深入 references/easing-guide.md、进出场配方 references/enter-exit-recipes.md、设计师风格 references/designers.md,以及 mobile-principles、desktop-principles、gsap、framer-motion、css-native、threejs-r3f、canvas-generative、compose-motion、compose-multiplatform、swiftui-motion、compose-graphics、swiftui-graphics、design-audit、ui-ux-pro-max 等 SKILL.md。
适用场景:Web、iOS/macOS、Android 及跨平台动效实现与审查。限制:资料未提供具体安装命令、收费与价格信息,暂未提供。