（2664期）Web Animation Design – 打造丝滑自然的 Web 交互体验

打造丝滑自然的 Web 交互体验 基于 Emil Kowalski animations.dev 课程的专业 Web 动画设计指南，涵盖缓动函数、弹簧物理、Framer Motion 布局动画及无障碍适配，帮助开发者打造自然流畅的交互体验。 使用说明 核心用法 本 Skill 是专业级 Web 动画设计知识库，源自 Emil Kowalski 的 animations.dev 课程，专注于自然、有目的性的动效设计。核心能力包括： 缓动函数决策系统：通过决策树快速选择正确缓动——入场用 ease-out、屏幕内移动用 ease-in-out、悬停用 ease、避免 linear 和 ease-in 时长与频次控制：微交互 100-150ms、标准 UI 150-250ms、模态框 200-300ms；高频使用场景（100+次/天）应禁用动画 工具链决策：布局变化/共享过渡/退出动画选 Framer Motion；简单悬停/性能敏感场景选 CSS；需弹簧物理/中断性选手势选 FM Framer Motion 深度用法：layout 自动布局动画、layoutId 共享元素变形、AnimatePresence 模式控制、Motion Values 高性能手势追踪 无障碍强制要求：所有动画必须适配 prefers-reduced-motion，推荐用 MotionConfig reducedMotion="user" 全局降级为透明度/背景色变化 显著优点 实战导向：直接提供 cubic-bezier 数值、代码片段、性能优化技巧，非纯理论 品牌思维：区分产品 UI（快速、克制）与营销页面（可更华丽），指导动画作为品牌表达 物理真实感：弹簧动画配置、动量中断机制，打造"有机"交互体验 决策工具丰富：包含工具选择决策树、缓动选择流程图、时长参考表等即查即用的结构化内容 潜在局限 React 生态绑定：Framer Motion 相关内容占比较大，Vue/Svelte/原生 JS 开发者需自行转化 CSS 动画深度有限：复杂 keyframes 编排、WAAPI (Web Animations API) 未深入覆盖 未覆盖 3D/WebGL：专注于 2D UI 动画，Three.js/R3F 等 3D 内容不在范围内 课程依赖：知识体系基于单一来源（animations.dev），虽权威但更新依赖课程迭代 适合人群 React/Next.js 开发者需实现复杂布局动画 追求"精致感"的前端工程师，希望系统提升动效设计能力 需要快速判断"用什么工具/缓动"的技术决策者 关注无障碍、需实现 prefers-reduced-motion 适配的团队 常规风险 性能陷阱：误用 height/width 动画触发重排、CSS 变量在深层组件树中导致的拖拽卡顿 无障碍违规：未实现 reduced motion 支持，可能对前庭功能障碍用户造成不适 过度动画：高频功能添加动画导致用户疲劳（如 Raycast 案例） GPU/CPU 交接闪烁：未添加 will-change: transform 导致的 1px 抖动 原始说明 Design and implement web animations that feel natural and purposeful. Use this skill proactively whenever the user asks questions about animations, motion, e...