用途
Universal Emotion 是一个动画情感框架，目标是在动画中实现任意情感结果。它通过系统化分析，把迪士尼的 12 条动画原则映射到任何目标情绪上，帮助把情感意图翻译成具体的运动参数。
主要能力
情绪映射框架
第一步：定义情绪
在以下维度上确定目标：
- 能量：低 ←→ 高
- 效价：负向 ←→ 正向
- 唤醒度：平静 ←→ 兴奋
- 支配感：顺从 ←→ 强势
第二步：将原则映射到情绪
按能量维度：
| 原则 | 低能量 | 高能量 |
|---|---|---|
| 挤压与拉伸 | 0-10% | 20-40% |
| 预备动作 | 50-100ms | 150-300ms |
| 时间 | 400-800ms | 100-250ms |
| 夸张 | 0-15% | 25-50% |
| 跟随动作 | 延长沉降 | 快速弹跳 |
按严肃/俏皮维度：
| 原则 | 严肃 | 俏皮 |
|---|---|---|
| 弧线 | 直接/线性 | 弯曲/弹跳 |
| 次要动作 | 极少 | 丰富 |
| 逐帧 | 避免 | 拥抱 |
| 吸引力 | 干净/几何 | 圆润/有机 |
第三步：选择缓动
| 情绪类型 | 缓动风格 | 示例 |
|---|---|---|
| 平静 | 对称缓动 | 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% 影响
- 相应调整时间/缓动
使用方式
该框架以映射表、速查表、CSS 变量模板和决策树的形式提供，供在动画设计中按步骤应用：先定义情绪维度，再查表确定各动画原则的参数，然后选择缓动风格，必要时叠加主次情绪。
适用场景
- 新颖的情感需求
- 品牌特定的诠释
- 复杂的情绪旅程
- 情感影响的 A/B 测试
- 跨文化考量
- 无障碍适配
限制
资料未提供具体的安装命令、依赖要求、平台限制或收费信息。