universal-emotion

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Universal Emotion Animation Framework

通用情感动画框架

Map Disney's 12 principles to any emotional goal through systematic analysis.

通过系统性分析将迪士尼的12项动画原则映射到任意情感目标。

Emotional Goal

情感目标

Any emotion can be achieved through intentional application of animation principles. This framework helps translate emotional intent into specific motion parameters.

通过有意识地运用动画原则，可以实现任何情感效果。本框架有助于将情感意图转化为具体的运动参数。

Emotion Mapping Framework

情感映射框架

Step 1: Define the Emotion

步骤1：定义情感

Identify your target on these spectrums:

Energy: Low ←→ High
Valence: Negative ←→ Positive
Arousal: Calm ←→ Excited
Dominance: Submissive ←→ Powerful

在以下维度上确定你的目标情感：

能量：低 ←→ 高
效价：消极 ←→ 积极
唤醒度：平静 ←→ 兴奋
支配性：顺从 ←→ 强势

Step 2: Map Principles to Emotion

步骤2：将原则映射到情感

Principle	Low Energy	High Energy
Squash & Stretch	0-10%	20-40%
Anticipation	50-100ms	150-300ms
Timing	400-800ms	100-250ms
Exaggeration	0-15%	25-50%
Follow Through	Extended settle	Quick bounce

Principle	Serious	Playful
Arc	Direct/Linear	Curved/Bouncy
Secondary Action	Minimal	Abundant
Straight Ahead	Avoid	Embrace
Appeal	Clean/Geometric	Round/Organic

原则	低能量	高能量
Squash & Stretch	0-10%	20-40%
Anticipation	50-100ms	150-300ms
Timing	400-800ms	100-250ms
Exaggeration	0-15%	25-50%
Follow Through	延长的稳定阶段	快速回弹

原则	严肃风格	活泼风格
Arc	直接/线性	曲线/弹跳感
Secondary Action	极少	丰富
Straight Ahead	避免使用	建议使用
Appeal	简洁/几何感	圆润/有机感

Step 3: Select Easing

步骤3：选择缓动效果

Emotion Type	Easing Style	Example
Calm	Symmetric ease	`ease-in-out`
Confident	Strong ease-out	`cubic-bezier(0,0,0.2,1)`
Playful	Overshoot	`cubic-bezier(0.34,1.56,0.64,1)`
Urgent	Sharp ease-out	`cubic-bezier(0.0,0,0.2,1)`
Elegant	Extended ease	`cubic-bezier(0.4,0,0.6,1)`

情感类型	缓动风格	示例
平静	对称缓动	`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)`

Quick Reference by Emotion

按情感快速参考

Positive Emotions

积极情感

Joy: Fast timing, high squash/stretch, bouncy easing
Trust: Consistent timing, minimal deformation, smooth easing
Calm: Slow timing, subtle movement, symmetric easing
Excitement: Fast timing, high energy, dynamic easing

愉悦：快节奏，高挤压/拉伸，弹跳感缓动
信任：稳定节奏，极少变形，平滑缓动
平静：慢节奏，细微运动，对称缓动
兴奋：快节奏，高能量，动态缓动

Functional Emotions

功能性情感

Urgency: Very fast, direct paths, attention-grabbing
Professional: Moderate timing, minimal decoration, standard easing
Friendly: Moderate timing, soft deformation, gentle easing

紧迫感：极快节奏，直接路径，吸引注意力
专业感：中等节奏，极少装饰，标准缓动
友好感：中等节奏，柔和变形，温和缓动

Premium Emotions

高端情感

Elegant: Slower timing, no deformation, refined easing
Powerful: Deliberate timing, impact emphasis, strong easing

优雅：较慢节奏，无变形，精致缓动
强势：从容节奏，强调冲击力，强烈缓动

CSS Variables Template

CSS变量模板

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;
}

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;
}

Decision Tree

决策树

Is the emotion high or low energy?
Is the feeling positive, negative, or neutral?
Should users feel in control or guided?
Is this a moment or a state?
What's the brand personality?

目标情感是高能量还是低能量？
感受是积极、消极还是中性？
应该让用户感到掌控还是被引导？
这是一个瞬时时刻还是持续状态？
品牌个性是什么？

Combining Emotions

情感组合

Real experiences blend emotions. Layer principles:

Primary emotion: 70% influence
Secondary emotion: 30% influence
Adjust timing/easing accordingly

真实体验融合多种情感。分层运用原则：

主情感：70%的影响权重
次情感：30%的影响权重
相应调整节奏/缓动效果

When to Use

使用场景

Novel emotional requirements
Brand-specific interpretations
Complex emotional journeys
A/B testing emotional impact
Cross-cultural considerations
Accessibility adaptations

新颖的情感需求
品牌专属的情感诠释
复杂的情感旅程设计
情感效果的A/B测试
跨文化适配考量
无障碍适配调整