关于 universal-emotion
一项将情绪目标转化为动画参数的设计技能，运用 Disney 的 12 条原则指导动效选择。适用于动效与 UI 设计，可据目标感受调整时长、缓动和形变。
主要功能
- 01用四个维度定位情绪
- 02按能量与基调匹配原则
- 03依情绪选择缓动方式
- 04组合主要与次要情绪
适用场景
- 01规划新功能的动效方向
- 02设计符合品牌个性的动画
- 03安排情绪转变过程
- 04针对无障碍需求调整动效
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/universal-emotion确认已加载。
详细介绍
通用情绪动画框架
通过系统分析，将迪士尼的 12 项原则应用于任意情绪目标。
情绪目标
通过有意识地运用动画原则，可以实现任何情绪。此框架有助于将情绪意图转化为具体的运动参数。
情绪映射框架
步骤 1：定义情绪
确定目标在以下维度上的位置：
- 能量：低 ←→ 高
- 效价：负面 ←→ 正面
- 唤醒度：平静 ←→ 兴奋
- 支配感：顺从 ←→ 强势
步骤 2：将原则映射到情绪
| 原则 | 低能量 | 高能量 |
|---|---|---|
| 挤压与拉伸 | 0-10% | 20-40% |
| 预备动作 | 50-100ms | 150-300ms |
| 节奏 | 400-800ms | 100-250ms |
| 夸张 | 0-15% | 25-50% |
| 跟随动作 | 延长定格 | 快速弹跳 |
| 原则 | 严肃 | 活泼 |
|---|---|---|
| 弧线 | 直接/线性 | 弯曲/弹跳 |
| 次要动作 | 极少 | 丰富 |
| 逐帧绘制 | 避免 | 采用 |
| 吸引力 | 简洁/几何 | 圆润/自然 |
步骤 3：选择缓动
| 情绪类型 | 缓动风格 | 示例 |
|---|---|---|
| 平静 | 对称缓动 | ease-in-out |
| 自信 | 强缓出 | cubic-bezier(0,0,0.2,1) |
| 活泼 | 过冲 | cubic-bezier(0.34,1.56,0.64,1) |
| 紧迫 | 急促缓出 | cubic-bezier(0.0,0,0.2,1) |
| 优雅 | 延展缓动 | cubic-bezier(0.4,0,0.6,1) |
按情绪划分的速查表
正面情绪
- 喜悦：节奏快、挤压与拉伸幅度大、缓动富有弹性
- 信任：节奏一致、形变极少、缓动平滑
- 平静：节奏慢、动作细微、对称缓动
- 兴奋：节奏快、能量高、缓动富有动感
功能性情绪
- 紧迫感：速度极快、路径直接、吸引注意
- 专业：节奏适中、装饰极少、使用标准缓动
- 友好：节奏适中、形变柔和、缓动轻柔
高端情绪
- 优雅：节奏较慢、不发生形变、缓动精致
- 强大：节奏从容、强调冲击力、缓动有力
CSS 变量模板
:root {
/* Adjust based on target emotion */
--emotion-duration: 300ms;
--emotion-easing: cubic-bezier(0.4, 0, 0.2, 1);
--emotion-squash: 1;
--emotion-overshoot: 0;
}
决策树
- 情绪是高能量还是低能量？
- 感受是正面、负面还是中性？
- 应让用户感到能够掌控局面，还是受到引导？
- 这是一个瞬间还是一种状态？
- 品牌个性是什么？
组合情绪
真实体验往往融合多种情绪。分层运用原则：
- 主要情绪：影响占 70%
- 次要情绪：影响占 30%
- 相应调整节奏/缓动
适用场景
- 新颖的情绪需求
- 特定品牌的诠释
- 复杂的情绪历程
- 对情绪影响进行 A/B 测试
- 跨文化考量
- 无障碍适配
评论
支持 Markdown