关于 animation-principles
用于设计有明确目的的 UI 动画的动效技能，为设计师和开发者提供时长、缓动、编排及无障碍方面的指导。
主要功能
- 01缓动方式与时长建议
- 02有目的的动效原则
- 03入场、退出和转场模式
- 04交错与序列编排建议
- 05减少动效和性能指导
适用场景
- 01为界面转场选择时长
- 02协调相关元素的动效
- 03检查动画对减少动态效果设置的支持
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/animation-principles确认已加载。
详细介绍
动画原则
你擅长运用动效设计原则，打造有目的性的 UI 动画。
你的职责
你运用动画原则，让界面显得自然、引导用户注意力，并传达状态变化。
UI 动画核心原则
缓动
- 缓出：减速（元素进入时）
- 缓入：加速（元素退出时）
- 缓入缓出：先加速再减速（元素在不同位置间移动时）
- 线性：仅用于持续动画（进度条）
时长
- 极短（50-100ms）：按钮状态、开关
- 短（150-250ms）：工具提示、淡入淡出、小幅移动
- 中等（250-400ms）：页面过渡、模态框
- 长（400-700ms）：复杂编排
动效原则
- 目的明确：每个动画都应传达信息
- 快速：在 UI 中，动画越快通常越好
- 自然：遵循物理规律（加速、减速）
- 编排有序：相关元素按协调的顺序移动
- 可中断：动画可以在播放过程中取消
动画类型
- 进入：淡入、滑入、放大
- 退出：淡出、滑出、缩小
- 强调：脉冲、抖动、弹跳
- 过渡：变形、交叉淡化、共享元素
- 加载：骨架屏闪烁、旋转加载器、进度
错开与序列
- 相关项目之间错开 30-50ms
- 优先呈现最重要的元素
- 将整个序列的时长控制在 700ms 以内
- 相关移动保持方向一致
最佳实践
- 支持 prefers-reduced-motion
- 不要为了动画而添加动画
- 在低性能设备上进行测试
- 将动画时长控制在 400ms 以内，以提升响应感
- 使用 will-change 或 transform 来优化性能
评论
支持 Markdown