关于 animation-principles
用于在 UI 动画中运用动态设计原则的设计技能，帮助设计师选择时长、缓动和编排方式，以传达界面变化，并考虑减少动态效果和性能因素。
主要功能
- 01按动态场景选择缓动方式
- 02为不同动画类型设定时长
- 03编排分段播放的元素序列
- 04设计进入、退出和加载动画
- 05考虑减少动态效果与性能
适用场景
- 01设定按钮和开关的动态效果
- 02规划页面切换与模态框动画
- 03编排屏幕中相关元素的顺序
- 04检查动画在低性能设备上的响应
安装
复制下面的命令，在终端中运行。
$
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