excitement-energy

兴奋与活力动画

创建充满活力、令人兴奋且富有动感和冲击力的体验动画。

情感目标

兴奋感通过动态且不断升级的动作逐渐增强。活力源自快速、多变的动画，它们营造动势并让用户保持投入。

用于表现兴奋感的迪士尼动画原则

挤压与拉伸

动态且富有冲击力（20-35%）。高能量的压缩与伸展。物体显得富有弹性且响应灵敏。

预备动作

快速积蓄张力（100-150ms）。像绷紧的弹簧。预备动作本身就能带来兴奋感。

演出布局

动态构图。使用对角线和非对称布局。没有静止感——每种布局都充满活力。

直奔主题动作

适用于粒子效果、爆炸和动态背景。充满活力的即兴感。

跟随动作与重叠动作

富有弹性、充满活力的过冲。元素不会直接停止——而是充满活力地弹回。

缓入缓出

采用强烈的加速曲线。快速起步，利落停止。使用 cubic-bezier(0.0, 0, 0.2, 1) 营造冲击感。

弧形运动

采用戏剧性的扫掠轨迹、高弧线和动态曲线。让动作吸引注意力。

次要动作

加入丰富的能量效果，如粒子、轨迹和辉光。环境会对令人兴奋的时刻作出响应。

节奏

快速有力（100-300ms）。快速连续的动作。多样化的节奏营造韵律与活力。

夸张

幅度较大（25-40%）。放大动作，增强冲击力。要表现活力，就不能过于含蓄。

扎实绘制

采用动态姿势与形态。充分体现动作感。通过形状传达速度与力量。

吸引力

采用大胆、高对比度的设计。使用高饱和度色彩和动态角度，营造视觉活力。

时间建议

元素	时长	缓动
快速冲击	100-150ms	ease-out
弹跳	300-400ms	spring
显现	200-300ms	ease-out
序列步骤	50-100ms	ease-out

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

高能量模式

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

营造活力

1. 以预备动作积蓄张力
2. 执行快速、有冲击力的主要动作
3. 加入充满活力的跟随动作
4. 让次要效果层层展开
5. 在下一个节拍前短暂停顿

适用场景

• 体育与健身应用
• 音乐与娱乐
• 游戏界面
• 活动推广
• 产品发布
• 销售与促销
• 流媒体平台
• 动作类应用