用途
UI Animation & Motion Design 是一份面向用户界面动效设计的综合指南，用于在界面中创建有目的、高性能的动画。适用于创建微交互、页面过渡、加载状态，以及跨网页和移动平台的各类 UI 动画。
动画原则
指南将动画的 12 条经典原则映射到 UI 场景，包括：Timing（时长反映重要性与距离）、Easing（自然的加速与减速）、Anticipation（动作前的视觉准备）、Follow-through（停止后惯性延续）、Secondary Action（辅助元素响应）、Staging（引导注意力到关键元素）、Squash & Stretch（弹性活泼的交互）、Exaggeration（强调重要反馈）、Arc（自然曲线运动路径）、Overlap（元素以不同速率运动）、Solid Drawing（保持一致的 3D 空间）、Appeal（引人愉悦的运动）。
动画的功能性目的包括：引导注意力到重要变化、展示元素间关系、为操作提供反馈、传达系统状态、降低认知负荷、建立空间方位感。不应出于以下目的：纯装饰、炫技、让界面「显得现代」、分散内容注意力。
时长与缓动
指南给出时长参考：即时（0-100ms）用于按钮状态变化、开关切换与微反馈；快速（100-200ms）用于悬停效果、简单淡入淡出与小位移；标准（200-300ms）用于大多数 UI 过渡、模态开合与下拉菜单；慢速（300-500ms）用于复杂过渡、页面过渡与大幅元素移动；更长（500ms+）用于主视觉动画、骨架屏加载与引导流程。距离越长时间越长：小于 100px 用 150-200ms，100-300px 用 200-300ms，300-500px 用 300-400ms，全屏用 400-500ms。
缓动函数包括 linear、ease-out（减速，用于元素进入）、ease-in（加速，用于元素离开）、ease-in-out（S 曲线，用于屏内过渡）、ease-out-back（回弹，用于活泼入场）。文档还提供了 CSS cubic-bezier 取值（含 Material Design 的 standard、decelerate、accelerate，以及 snappy、bouncy 等自定义值）与弹簧参数示例。
动画模式
- 微交互：按钮状态切换（悬停缩放、按下缩放、恢复）、开关滑块位移与轨道颜色变化、复选框勾选描边与涟漪效果，均给出具体时长。
- 加载状态：骨架屏使用线性渐变从左到右的 shimmer 效果（附 CSS background 与 animation 示例）；旋转器建议每次旋转 1-2 秒、linear 缓动、风格匹配品牌。
- 页面过渡：交叉淡入淡出、滑动（方向遵循导航层级，前进左滑、返回右滑，300-400ms）、共享元素变形（位置、尺寸、圆角变化，300-500ms）。
- 列表动画：交错入场（每项 30-50ms 延迟，总时长不超过 500ms，使用 translateY + opacity）；重排使用 FLIP 技术（200-300ms，ease-out）。
性能
GPU 加速属性包括 transform（translate、scale、rotate）、opacity、filter（配合 will-change）。会触发布局或重绘的慢属性包括 width/height、margin/padding、top/left/right/bottom、border/border-radius、font-size、box-shadow。文档强调应使用 transform 而非 left 等属性做位移动画，并给出 FLIP 技术的 JavaScript 实现步骤（First 取初始位置、Last 应用变化取最终位置、Invert 计算差值并应用反向 transform、Play 通过 requestAnimationFrame 去除 transform 并添加过渡）。
CSS 与 JavaScript 技术
CSS 部分涵盖 keyframes 动画（含 steps 打字机效果）、transition 写法、animation 简写及其组成。JavaScript 动画库对比表列出 CSS、Web Animations API、GSAP、Framer Motion、anime.js、Motion One、Lottie 的适用场景与大致体积，并提供 Framer Motion（含 variants 与 staggerChildren）和 GSAP（含 timeline 与 ScrollTrigger）的代码示例。
无障碍
使用 prefers-reduced-motion 媒体查询减少动画；应避免对视庭障碍用户造成问题的效果，如视差滚动、缩放动画、旋转元素、自动播放动画与每秒超过 3 次的闪烁；安全替代包括透明度淡入淡出、颜色过渡、细微位置变化与用户触发的动画。引用 WCAG 相关条款：2.2.2 暂停、停止、隐藏；2.3.1 三次闪烁；2.3.3 交互动画。
移动端与设计系统
移动端部分包含触摸反馈（移除点击高亮、touch-action: manipulation、按下透明度变化、涟漪效果）以及 iOS、Android、Web 的平台动画风格与时长对照。设计系统集成部分给出动画 token 示例，定义时长（instant 到 slower）与缓动变量并组合使用。
最佳实践与检查清单
应做到：有目的地动画、使用 GPU 加速属性、时长控制在 500ms 内、匹配品牌个性、尊重 prefers-reduced-motion、在低端设备测试、使用一致的时序系统。不应：纯装饰性动画、阻塞交互、过度回弹、制造晕动诱因、遗漏退出动画、忽视性能指标、延迟关键内容。文末提供实施前、实施中与质量检查三阶段清单。
限制
此资料未提供具体的安装命令、收费方式、平台支持范围或效果承诺等信息。