Back to Details

playfulness-fun

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Playfulness & Fun Animation

趣味灵动动画

Create animations that entertain, surprise, and make interactions genuinely enjoyable.
创作能够带来娱乐感、惊喜感，让交互体验真正愉悦的动画。

Emotional Goal

情感目标

Playfulness invites interaction through unexpected, whimsical motion. Fun comes from animations that have personality, respond expressively, and make users smile.
趣味性通过出乎意料、天马行空的动效引导用户交互。趣味感源自具备个性、反馈生动、能让用户会心一笑的动画。

Disney Principles for Playfulness

打造趣味性的迪士尼动画原则

Squash & Stretch

挤压与拉伸

Generous, exaggerated (25-40%). Rubbery, cartoon physics. Objects should feel alive and reactive. Bounce like a beach ball.
幅度充足、效果夸张（25-40%）。类似橡胶质感的卡通物理效果。物体看起来富有生命力、反馈灵敏，像沙滩球一样弹跳。

Anticipation

预备动作

Exaggerated wind-ups (150-250ms). Comic timing—big preparation for big payoff. Elements "think" before acting.
夸张的蓄力过程（150-250ms）。喜剧式节奏——充分的铺垫才能带来足够的惊喜效果，元素在动作前仿佛有「思考」的过程。

Staging

动作呈现

Theatrical presentation. Clear setup and punchline. Give playful moments room to breathe and be noticed.
戏剧化的表现方式。清晰的铺垫和包袱点，给趣味动画片段留出足够的展示空间，确保用户能注意到。

Straight Ahead Action

正向逐帧创作

Embrace spontaneity. Wobbly paths, unpredictable bounces. Characters and elements with minds of their own.
拥抱自发性，晃动的路径、不可预测的弹跳效果，角色和元素仿佛有自己的想法。

Follow Through & Overlapping Action

跟随动作与重叠动作

Extensive, bouncy follow-through. Overshoots, wobbles, and settling. Like a cartoon character skidding to a stop.
丰富有弹性的跟随效果，超调、晃动、逐渐归位，就像卡通角色急刹车滑行停下的效果。

Slow In & Slow Out

慢入慢出

Asymmetric with overshoot. Quick starts, bouncy landings. 
cubic-bezier(0.68, -0.55, 0.265, 1.55)
for elastic effect.
搭配超调效果的非对称曲线。启动快、落地有弹性，使用 
cubic-bezier(0.68, -0.55, 0.265, 1.55)
实现弹性效果。

Arc

运动弧线

Exaggerated, bouncy curves. High arcs for jumps. Squiggly paths for personality. Nothing moves in straight lines.
夸张有弹性的曲线。跳跃时使用高弧线，波浪路径增加个性，没有物体是沿直线运动的。

Secondary Action

次要动作

Abundant! Wiggles, sparkles, expressions. Elements react to each other. The whole interface feels alive.
大量添加！晃动、闪光、表情动效，元素之间互相响应，整个界面看起来充满生命力。

Timing

时间控制

Varied and expressive (100-500ms). Quick snaps, slow anticipation. Comic timing with beats and pauses.
灵活多变、富有表现力（100-500ms）。快速切换、缓慢蓄力，配合节拍和停顿打造喜剧节奏。

Exaggeration

夸张

High (30-50%). Push movements to cartoon levels. Impossible physics that feel emotionally true.
高幅度（30-50%）。将动作效果推到卡通级别，违背现实物理规则但情感感受上真实合理。

Solid Drawing

立体绘制

Maintain appeal through deformation. Stretched elements stay charming. Volume shifts for effect.
变形过程中保持吸引力，拉伸的元素仍然保持讨喜的质感，通过体积变化强化效果。

Appeal

吸引力

Round, friendly shapes. Bright, saturated colors. Big eyes, expressive forms. Character in everything.
圆润友好的形状，明亮饱和的色彩，大眼睛、富有表现力的形态，所有元素都具备角色感。

Timing Recommendations

时长建议

ElementDurationEasing
Bounce400-600ms
spring(1, 60, 8)
Wiggle300-400ms
ease-in-out
Pop150-250ms
ease-out-back
Squash100-150ms
ease-out
动效类型时长缓动函数
弹跳400-600ms
spring(1, 60, 8)
晃动300-400ms
ease-in-out
弹出150-250ms
ease-out-back
挤压100-150ms
ease-out

CSS Easing

CSS 缓动变量

css
--play-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--play-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
--play-wobble: cubic-bezier(0.45, 0.05, 0.55, 0.95);
css
--play-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--play-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
--play-wobble: cubic-bezier(0.45, 0.05, 0.55, 0.95);

Fun Animations

趣味动效示例

css
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

@keyframes boing {
  0% { transform: scale(1); }
  30% { transform: scale(1.25, 0.75); }
  50% { transform: scale(0.85, 1.15); }
  70% { transform: scale(1.05, 0.95); }
  100% { transform: scale(1); }
}
css
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

@keyframes boing {
  0% { transform: scale(1); }
  30% { transform: scale(1.25, 0.75); }
  50% { transform: scale(0.85, 1.15); }
  70% { transform: scale(1.05, 0.95); }
  100% { transform: scale(1); }
}

When to Use

适用场景

  • Games and gamification
  • Children's interfaces
  • Social media reactions
  • Onboarding tutorials
  • Empty states
  • Easter eggs
  • Casual apps
  • Entertainment platforms
  • 游戏与游戏化设计
  • 儿童类界面
  • 社交媒体互动反应
  • 新手引导教程
  • 空状态页
  • 彩蛋
  • 休闲类应用
  • 娱乐平台