emilkowal-animations

这是一份面向 Web 界面的动画最佳实践合集，整理自 Emil Kowalski 的公开教学、开源库（Sonner、Vaul）及其 animations.dev 课程。适用于在 React 组件中添加动画、选择缓动曲线或时长、实现手势交互（滑动、拖拽）、构建提示与抽屉组件、优化动画性能、保障动画可访问性等场景。\n\n内容按影响优先级分为 7 类，共 43 条规则，每条带前缀标识：缓动选择（ease-，关键级）、时长与节拍（timing-，关键级）、属性选择（props-，高）、变换技巧（transform-，高）、交互模式（interact-，中高）、策略性动画（strategy-，中）、可访问性与打磨（polish-，中）。\n\n主要规则要点：默认使用 ease-out，优先自定义 cubic-bezier；界面动画不超过 300ms，越快感知性能越好，按下与释放用非对称时长，抽屉用 500ms；只动画 transform 与 opacity，主线程繁忙时用硬件加速；按压缩放至 0.97，不要从 scale(0) 开始，translateY 用百分比；动画需可中断，支持基于速度的关闭与吸附点，拖拽使用指针捕获。键盘触发的操作不应加动画，动画必须有目的，高频交互需谨慎，营销站点是例外。需尊重 prefers-reduced-motion，可用 opacity 作为降级，Framer Motion 用 useReducedMotion 钩子。\n\n关键数值：iOS 抽屉曲线 cubic-bezier(0.32, 0.72, 0, 1)；按压缩放 scale(0.97)；最小入场 scale(0.95)；标准过渡 200ms ease-out；动量关闭速度阈值 0.11 px/ms；滚动揭示视口阈值 100px；提示堆叠偏移 14px。\n\n限制：资料未提供具体安装命令、代码示例、收费与平台信息，暂未提供这些内容。