joy-delight

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Joy & Delight Animation

愉悦感动画设计

Create animations that spark happiness, pleasant surprise, and memorable delight.

创建能激发愉悦、惊喜记忆和美好感受的动画。

Emotional Goal

情感目标

Joy emerges from unexpected pleasures, playful movements, and moments that exceed expectations. Delight comes from animations that feel alive, responsive, and genuinely fun.

愉悦感源于意外的惊喜、活泼的动作以及超出预期的瞬间。而愉悦感动画则要给人鲜活、响应及时且真正有趣的感觉。

Disney Principles for Joy

适用于愉悦感的迪士尼动画原则

Squash & Stretch

Exaggerate bouncy, elastic movements. Objects that squash 30-40% on impact feel alive and playful. Use for success states, rewards, and celebrations.

夸张富有弹性的弹跳动作。物体在碰撞时挤压30-40%会显得鲜活有趣。适用于成功状态、奖励和庆祝场景。

Anticipation

Build excitement before reveals. A slight pullback (100-150ms) before a pop-in creates satisfying payoff. Perfect for notifications and achievements.

在展示前营造兴奋感。弹出前轻微回拉（100-150毫秒）能带来满足的体验。非常适合通知和成就解锁场景。

Staging

Draw focus to joyful moments. Clear visual hierarchy ensures the delightful element gets full attention. Dim surroundings during celebration animations.

将焦点引向愉悦时刻。清晰的视觉层级确保愉悦元素获得充分关注。在庆祝动画期间调暗周围环境。

Straight Ahead Action

Create spontaneous, organic movements for confetti, particles, and celebration effects. Randomized paths feel natural and exciting.

为彩屑、粒子和庆祝效果创建自发、自然的运动。随机路径会显得自然且令人兴奋。

Follow Through & Overlapping Action

Let elements overshoot and settle with bouncy secondary motion. Hair, ribbons, and decorative elements should continue moving after main action.

让元素在主动作结束后继续有弹跳的次级运动。头发、丝带和装饰元素应在主动作结束后继续移动。

Slow In & Slow Out

Use asymmetric easing—quick starts with slow, satisfying landings.

cubic-bezier(0.34, 1.56, 0.64, 1)

creates playful overshoot.

使用非对称缓动——快速启动，缓慢且令人满足地结束。

cubic-bezier(0.34, 1.56, 0.64, 1)

能创造出有趣的过冲效果。

Arc

Bouncing, curved trajectories feel more joyful than linear paths. Elements should travel in parabolic arcs during celebrations.

弹跳的曲线轨迹比直线更具愉悦感。庆祝时元素应沿抛物线轨迹运动。

Secondary Action

Add sparkles, particles, or wobbles to primary animations. A "like" heart that radiates small hearts amplifies joy.

在主动画中添加闪光、粒子或晃动效果。比如“点赞”的心形图标放射出小爱心能增强愉悦感。

Timing

Fast, snappy timing (150-250ms) feels energetic. Quick bursts with micro-pauses create rhythm. Success animations: 200-400ms.

快速、明快的时长（150-250毫秒）充满活力。快速爆发搭配微停顿能创造节奏感。成功动画：200-400毫秒。

Exaggeration

Push proportions and movements 20-30% beyond realistic. Oversized bounces, stretched smiles, and amplified reactions.

将比例和动作推至超出真实范围20-30%。超大弹跳、拉长的笑容和放大的反应。

Solid Drawing

Maintain volume during stretchy movements. Squashed elements should expand horizontally to preserve mass—this reads as physicality.

在拉伸动作中保持体积感。被挤压的元素应水平扩展以保持质量——这会让动画显得更具物理真实感。

Appeal

Round shapes, bright colors, and smooth curves. Asymmetry in timing and position adds character and charm.

圆润的形状、明亮的色彩和流畅的曲线。时长和位置的不对称性能增添个性和魅力。

Timing Recommendations

时长建议

Element	Duration	Easing
Pop-in	200-300ms	`ease-out-back`
Bounce	300-500ms	`spring(1, 80, 10)`
Confetti	800-1200ms	`ease-out`
Celebration	400-600ms	`ease-out-elastic`

元素	时长	缓动效果
弹出	200-300ms	`ease-out-back`
弹跳	300-500ms	`spring(1, 80, 10)`
彩屑	800-1200ms	`ease-out`
庆祝	400-600ms	`ease-out-elastic`

CSS Easing

CSS 缓动效果

css

--joy-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--joy-pop: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--joy-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);

css

--joy-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--joy-pop: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--joy-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);

When to Use

使用场景

Success confirmations and completions
Achievement unlocks and rewards
Onboarding celebrations
Easter eggs and surprises
Positive feedback states
Welcome animations

成功确认与完成提示
成就解锁与奖励
新用户引导庆祝
彩蛋与惊喜内容
积极反馈状态
欢迎动画