该技能是一份面向 Web 界面的动画最佳实践指南,内容基于 Emil Kowalski 的教学、开源库(Sonner、Vaul)及其 animations.dev 课程,共包含 58 条规则,分为 8 个类别并按影响程度排序。适用时机包括:为 React 组件添加动画、选择缓动曲线与时长、实现手势交互(滑动、拖拽)、构建 toast 通知或抽屉组件、优化动画性能、保证动画无障碍,以及用 Tailwind CSS v4 工具类表达上述原则。规则类别与优先级为:缓动选择(CRITICAL,前缀 ease-)、时长与节拍(CRITICAL,timing-)、属性选择(HIGH,props-)、变换技巧(HIGH,transform-)、交互模式(MEDIUM-HIGH,interact-)、策略性动画(MEDIUM,strategy-)、无障碍与打磨(MEDIUM,polish-)、Tailwind v4 工具类(MEDIUM,tw-)。关键值参考含缓动、缩放、时长、速度阈值、视口阈值等示例。使用方式为在编写、审查或实现动画时按类别查阅规则并遵循;Tailwind v4 规则仅适用于该项目,底层 CSS 与 Framer Motion 规则仍为准绳。限制:具体的安装命令、版本号与许可信息官方资料暂未提供。
emilkowal-animations-v1
设计与创作
更新于 10-15 17:27