Back to Details

excitement-energy

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Excitement & Energy Animation

活力与能量动画

Create animations that energize, excite, and create dynamic, high-impact experiences.
打造能够传递活力、激发兴奋感，同时富有动态感、高冲击力体验的动画。

Emotional Goal

情绪目标

Excitement builds through dynamic, escalating motion. Energy comes from fast, varied animations that create momentum and keep users engaged.
兴奋感通过动态、逐步升级的动效逐步建立。能量感来自于快速、多样的动画，这类动画能够营造势头感，保持用户的参与度。

Disney Principles for Excitement

迪士尼活力动画原则

Squash & Stretch

挤压与拉伸

Dynamic and impactful (20-35%). High-energy compression and extension. Objects feel springy and responsive.
动态且富有冲击力（20-35%）。高能量的压缩与延伸效果，让物体看起来富有弹性、响应及时。

Anticipation

预备动作

Quick, building tension (100-150ms). Like a coiled spring. The anticipation itself creates excitement.
快速累积张力（100-150ms），就像被压紧的弹簧，预备动作本身就能营造兴奋感。

Staging

舞台布局

Dynamic compositions. Diagonal lines, asymmetric layouts. Nothing static—energy in every arrangement.
采用动态构图，对角线、非对称布局，没有静态元素——每一处排布都传递出能量感。

Straight Ahead Action

连续动作

Embrace for particle effects, explosions, and dynamic backgrounds. Energetic spontaneity.
适合用于粒子特效、爆炸动效和动态背景，充满灵动鲜活的表现力。

Follow Through & Overlapping Action

跟随动作与重叠动作

Bouncy, energetic overshoot. Elements don't just stop—they rebound with vitality.
富有弹性、充满活力的超界效果，元素不会直接停止——它们会充满生命力地回弹。

Slow In & Slow Out

缓入缓出

Aggressive acceleration curves. Fast starts, snappy stops. 
cubic-bezier(0.0, 0, 0.2, 1)
for punch.
高对比度的加速度曲线，启动快、收尾干脆。
cubic-bezier(0.0, 0, 0.2, 1)
可实现冲击力效果。

Arc

弧形运动

Dramatic, sweeping paths. High trajectories, dynamic curves. Motion that commands attention.
夸张的大幅运动路径，高轨迹、动态曲线，能够吸引注意力的动效。

Secondary Action

次要动作

Abundant energy effects. Particles, trails, glows. The environment responds to exciting moments.
丰富的能量效果，粒子、拖尾、光晕，环境会对高光时刻做出响应。

Timing

时间把控

Fast and punchy (100-300ms). Rapid sequences. Variety in timing creates rhythm and energy.
快速且有冲击力（100-300ms），快速序列，时间节奏的变化能够营造韵律感和能量感。

Exaggeration

夸张效果

High (25-40%). Push movements to feel impactful. Energy requires going beyond subtle.
高程度夸张（25-40%），放大动作幅度来提升冲击力，能量感需要跳出细腻克制的范畴。

Solid Drawing

立体绘制

Dynamic poses and forms. Lean into motion. Shapes that convey speed and force.
动态的姿势和形态，贴合动效方向，形状本身就能传递速度和力量感。

Appeal

吸引力

Bold, high-contrast design. Saturated colors. Dynamic angles. Visual energy.
大胆、高对比度的设计，高饱和色彩，动态视角，充满视觉能量。

Timing Recommendations

时长建议

ElementDurationEasing
Quick hit100-150ms
ease-out
Bounce300-400ms
spring
Reveal200-300ms
ease-out
Sequence step50-100ms
ease-out
元素时长缓动函数
快速触发效果100-150ms
ease-out
弹跳效果300-400ms
spring
展示效果200-300ms
ease-out
序列步骤50-100ms
ease-out

CSS Easing

CSS 缓动变量

css
--energy-snap: cubic-bezier(0.0, 0, 0.2, 1);
--energy-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--energy-punch: cubic-bezier(0.22, 1, 0.36, 1);
css
--energy-snap: cubic-bezier(0.0, 0, 0.2, 1);
--energy-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--energy-punch: cubic-bezier(0.22, 1, 0.36, 1);

High-Energy Patterns

高能量动效模式

css
@keyframes energy-burst {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes energy-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

@keyframes energy-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
css
@keyframes energy-burst {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes energy-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

@keyframes energy-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

Building Energy

能量感构建步骤

  1. Start with anticipation build
  2. Quick, impactful main action
  3. Energetic follow-through
  4. Secondary effects cascade
  5. Brief pause before next beat
  1. 从预备动作的铺垫开始
  2. 快速、有冲击力的主动作
  3. 充满活力的跟随动作
  4. 次级效果层叠出现
  5. 下一个节拍前短暂停顿

When to Use

适用场景

  • Sports and fitness apps
  • Music and entertainment
  • Gaming interfaces
  • Event promotions
  • Product launches
  • Sales and promotions
  • Streaming platforms
  • Action-oriented apps
  • 运动健身类应用
  • 音乐与娱乐类产品
  • 游戏界面
  • 活动推广
  • 产品发布
  • 促销活动
  • 流媒体平台
  • 动作导向类应用