用途:作为微交互架构技能,用于设计、实现、审查和咨询移动端、Web 应用与响应式网站中的小型交互,让界面既可用、流畅、无障碍,又有愉悦感。覆盖 iOS(SwiftUI/UIKit)、Android(Jetpack Compose/XML)、React Native 以及 Web(React/Vue/Svelte/原生)。
主要能力:采用 Dan Saffer 的四段模型“触发→规则→反馈→循环与模式”,要求每个微交互都显式说明这四部分。提供决策清单(是否需要确认、是否加载、是否状态变化、是否高频、是否纯装饰等)来判断该不该加动效。给出时长与缓动参考(如瞬时 0–50ms、快速 100–200ms、常规 200–300ms;退出动画约为进入时长的 60%–75%),并提供标准、强调、弹簧、弹跳等缓动曲线与弹簧物理预设(gentle/default/snappy/bouncy/stiff)。还包含按钮、开关、下拉刷新、滑动操作、底部弹层、表单校验、骨架屏、Toast、弹窗、下拉菜单、卡片悬停、滚动揭示、共享元素转场、标签切换、手风琴、进度指示、深色模式切换、通知徽标、拖放、加入购物车、密码强度、命令面板等模式库。
使用方式:先确定目标平台,再按平台选择实现路径。Web 以 CSS 优先(transition、@keyframes、animation-timeline、@starting-style),复杂场景用 Framer Motion、GSAP、Motion One、anime.js、React Spring,并可用 View Transitions、滚动驱动动画等现代 API;iOS 以弹簧动效为主,使用 .spring(response:dampingFraction:) 等与触觉反馈;Android 遵循 Material Motion 时长/缓动令牌,使用 animateXAsState、AnimatedVisibility、AnimatedContent、Crossfade、spring()、SharedTransitionLayout 等;React Native 使用 Reanimated 3、Gesture Handler、Lottie 与 expo-haptics 等。
适用场景与限制:适合为 App 与网站添加、修复、审查微交互并建立动效规范。限制方面强调必须尊重 prefers-reduced-motion,优先动画 transform、opacity、filter、clip-path,避免动画 width、height、top、left 等;移动端控制并发动画数量与时长,并注意触控目标尺寸(iOS 44×44pt、Android 48×48dp、Web 44×44px)与 ARIA、焦点管理。资料未提供安装命令、价格、平台访问方式及具体版本要求。