power-confidence

力量与自信动画

创建传达力量、权威和强大气场的动画。

情感目标

力量源自审慎、克制且厚重的运动。自信意味着动画明确目标，并坚定地抵达终点。

力量动画的 Disney 原则

挤压与拉伸

尽量减少拉伸，突出有力的挤压。重物不会拉伸——而是在撞击时压缩（10-15%）。强调重量感和坚实感，而非柔韧性。

预备动作

审慎而自信地做好准备（100-200ms）。这不是犹豫，而是在积蓄力量。就像捕食者出击前的蓄势。

舞台调度

占据主导位置。尺寸大，位于舞台中央。强大的元素凭借自身气场吸引注意力，而非依靠动作。

直线进行法

避免使用。力量需要意图和控制。每个动作都应审慎而非自发。

跟随与重叠动作

受控减速。重物不会弹跳——而是稳稳地落定。后续动作短促、果断。

缓入与缓出

强劲的缓出，随后骤然停止。迅速加速，果断落定。强势入场可使用 cubic-bezier(0.0, 0, 0.2, 1)。

弧线运动

优先选择直接路径。力量会走最直接的路线。需要弧线时，应低平有力，像冲锋的公牛。

次要动作

有力的涟漪或冲击波。力量落下时，周围环境也会产生反应。加入细微的屏幕震动和辐射状的冲击力。

时间控制

中快速，终点果断（150-300ms）。既不仓促，也不拖沓。速度应富有目的性。

夸张

适度夸张（15-25%）。放大冲击效果，而非动作幅度。落定比过程更重要。

扎实绘图

厚重、稳固的形态。鲜明的几何形状。每一帧都体现稳定感与重量感。

吸引力

大胆、棱角分明的设计。高对比度。深沉、饱和的色彩。强大的气场。

时间控制建议

元素	时长	缓动
入场	200-300ms	ease-out
撞击	100-150ms	ease-out
稳定	150-200ms	ease-out
过渡	250-350ms	ease-in-out

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

撞击动画

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

重量感模拟

• 较大的元素动画速度较慢
• 强大的元素会影响周围环境
• 撞击会产生短暂压缩
• 恢复过程快速且受控

适用场景

• 主视觉区块和标题
• 高端产品展示
• 品牌宣言
• 成就展示
• 仪表板关键指标
• 高管演示文稿
• 汽车和奢侈品牌
• 体育和健身应用