Back to Details

power-confidence

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Power & Confidence Animation

力量与自信风格动画

Create animations that convey strength, authority, and commanding presence.
制作能够传达力量感、权威性与强大气场的动画。

Emotional Goal

情感目标

Power comes from deliberate, controlled, weighty motion. Confidence means animations that know exactly where they're going and arrive with certainty.
力量源自从容、可控且有分量的运动。自信意味着动画清楚地知道自己的去向，并笃定地抵达目标。

Disney Principles for Power

迪士尼动画力量感原则

Squash & Stretch

Squash & Stretch（挤压与拉伸）

Minimal stretch, impactful squash. Heavy objects don't stretch—they compress on impact (10-15%). Weight and solidity over flexibility.
尽量减少拉伸，强调有冲击力的挤压。重物不会拉伸——它们在碰撞时会压缩（10-15%）。优先体现重量感和扎实感，而非灵活性。

Anticipation

Anticipation（预备动作）

Deliberate, confident preparation (100-200ms). Not hesitation—gathering power. Like a predator before striking.
从容、自信的预备动作（100-200毫秒）。这不是犹豫，而是积蓄力量，就像捕食者发起攻击前的状态。

Staging

Staging（构图呈现）

Dominant positioning. Large scale, center stage. Powerful elements command attention through presence, not motion.
占据主导位置。大尺寸、居中呈现。有力量感的元素通过自身气场吸引注意力，而非依赖运动。

Straight Ahead Action

Straight Ahead Action（逐帧绘制动作）

Avoid. Power requires intention and control. Every movement should be deliberate, not spontaneous.
避免使用该原则。力量感需要明确的目的性和控制力，每一个动作都应是从容规划的，而非随性而为。

Follow Through & Overlapping Action

Follow Through & Overlapping Action（跟随动作与重叠动作）

Controlled deceleration. Heavy elements don't bounce—they settle with authority. Short, decisive follow-through.
可控的减速过程。重物不会弹跳——它们会带着权威性稳定下来。跟随动作要简短、果断。

Slow In & Slow Out

Slow In & Slow Out（渐入渐出）

Strong ease-out with sudden stops. Fast acceleration, decisive landing. 
cubic-bezier(0.0, 0, 0.2, 1)
for powerful arrivals.
强烈的渐出效果搭配突然停止。快速加速，笃定落地。
cubic-bezier(0.0, 0, 0.2, 1)
用于实现有力量感的入场效果。

Arc

Arc（弧线运动）

Direct paths preferred. Power takes the straightest route. When arced, low and driving—like a charging bull.
优先选择直线路径。力量感走最直接的路线。若使用弧线，应采用低平且有冲击力的轨迹——就像公牛冲锋一样。

Secondary Action

Secondary Action（次要动作）

Impactful ripples or shockwaves. When power lands, the environment responds. Subtle screen shake, radiating force.
有冲击力的涟漪或冲击波。当力量落地时，环境要做出响应。比如轻微的屏幕震动、向外扩散的力量效果。

Timing

Timing（时间控制）

Medium-fast with decisive endpoints (150-300ms). Not rushed, not leisurely. Purposeful velocity.
中速偏快，搭配笃定的终点（150-300毫秒）。既不仓促，也不拖沓，速度要有明确的目的性。

Exaggeration

Exaggeration（夸张）

Moderate (15-25%). Amplify impact, not movement. The landing matters more than the journey.
适度夸张（15-25%）。放大冲击力，而非运动幅度。落地的效果比运动的过程更重要。

Solid Drawing

Solid Drawing（扎实造型）

Heavy, grounded forms. Strong geometric shapes. Stability and mass in every frame.
厚重、扎实的造型。采用硬朗的几何形状。每一帧都要体现稳定性和分量感。

Appeal

Appeal（吸引力）

Bold, angular design. High contrast. Dark, saturated colors. Commanding presence.
大胆、棱角分明的设计。高对比度。深色调、饱和度高的色彩。营造强大的气场。

Timing Recommendations

时间控制建议

ElementDurationEasing
Entrance200-300ms
ease-out
Impact100-150ms
ease-out
Settle150-200ms
ease-out
Transition250-350ms
ease-in-out
元素时长缓动效果
入场200-300ms
ease-out
碰撞100-150ms
ease-out
稳定150-200ms
ease-out
过渡250-350ms
ease-in-out

CSS Easing

CSS 缓动效果

css
--power-strike: cubic-bezier(0.0, 0, 0.2, 1);
--power-land: cubic-bezier(0.16, 1, 0.3, 1);
--power-drive: cubic-bezier(0.25, 0.1, 0.25, 1);
css
--power-strike: cubic-bezier(0.0, 0, 0.2, 1);
--power-land: cubic-bezier(0.16, 1, 0.3, 1);
--power-drive: cubic-bezier(0.25, 0.1, 0.25, 1);

Impact Animation

碰撞动画

css
@keyframes power-land {
  0% {
    transform: translateY(-20px) scale(1.05);
    opacity: 0;
  }
  60% {
    transform: translateY(2px) scale(0.98);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
css
@keyframes power-land {
  0% {
    transform: translateY(-20px) scale(1.05);
    opacity: 0;
  }
  60% {
    transform: translateY(2px) scale(0.98);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

Weight Simulation

重量感模拟

  • Larger elements animate slower
  • Powerful elements affect surroundings
  • Impacts create brief compression
  • Recovery is quick and controlled
  • 尺寸更大的元素动画速度更慢
  • 有力量感的元素会影响周围环境
  • 碰撞会产生短暂的压缩效果
  • 恢复过程要快速且可控

When to Use

适用场景

  • Hero sections and headlines
  • Premium product showcases
  • Brand statements
  • Achievement displays
  • Dashboard key metrics
  • Executive presentations
  • Automotive and luxury brands
  • Sports and fitness apps
  • 首页Hero区域与标题
  • 高端产品展示
  • 品牌宣言
  • 成就展示
  • 仪表盘关键指标
  • 高管演示文稿
  • 汽车与奢侈品牌
  • 运动健身类应用