兴奋与能量动画
创建能够激发活力、令人兴奋并带来动态高冲击力体验的动画。
情绪目标
兴奋感通过动态且不断升级的运动来积累。能量来自快速、多变的动画，从而形成动能并保持用户投入。
用于激发兴奋感的迪士尼原则
挤压与拉伸（Squash & Stretch）
动态且有冲击力（20-35%）。高能量的压缩与伸展。物体感觉富有弹性且响应迅速。
预备动作（Anticipation）
快速积累张力（100-150ms）。如同一根被压紧的弹簧。预备动作本身就制造兴奋。
舞台调度（Staging）
动态构图。对角线、非对称布局。没有静态元素——每一处排布中都蕴含能量。
连续动作（Straight Ahead Action）
适合粒子效果、爆炸和动态背景。充满活力的即兴感。
跟随与重叠动作（Follow Through & Overlapping Action）
有弹性的、充满活力的过冲。元素不会简单停下——它们带着生命力回弹。
慢入慢出（Slow In & Slow Out）
激进的加速曲线。快速起步，干脆停止。使用 cubic-bezier(0.0, 0, 0.2, 1) 制造冲击感。
弧线（Arc）
戏剧化的、大幅挥扫的路径。高轨迹、动态曲线。让运动吸引注意力。
次要动作（Secondary Action）
丰富的能量效果。粒子、拖尾、辉光。环境对精彩瞬间做出响应。
时序（Timing）
快速且有力（100-300ms）。节奏紧凑的序列。时序变化制造韵律与能量。
夸张（Exaggeration）
高程度（25-40%）。把动作推到感觉有冲击力。能量需要超越细微的程度。
扎实的描绘（Solid Drawing）
动态姿态与形态。向运动方向倾斜。传达速度与力量的形状。
吸引力（Appeal）
大胆、高对比度的设计。饱和的色彩。动态的角度。视觉上的能量。
时序建议
| 元素 | 时长 | 缓动 |
|---|---|---|
| 快速打击 | 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); }
}
能量的构建
- 以预备动作的积蓄开始
- 快速、有冲击力的主体动作
- 充满活力的跟随动作
- 次要效果逐层叠加
- 下一个节拍前的短暂停顿
适用场景
- 体育与健身类应用
- 音乐与娱乐
- 游戏界面
- 活动推广
- 产品发布
- 销售与促销
- 流媒体平台
- 动作导向型应用