元素构成:遮罩 + 弹窗底板 + 1 个按钮
单个元素时长:0.2-0.25 秒
整体入场总时长:0.25-0.35 秒
时间轴示例:
0-0.2 秒:遮罩淡入(0→0.5)
0.05-0.25 秒:底板缩放弹出(0→1.1→1)
0.2-0.3 秒:按钮淡入
适用场景:确认框、提示框、设置面板
元素构成:遮罩 + 底板 + 标题 + 图标 + 2 个按钮
单个元素时长:0.2-0.25 秒
元素间时间差:0.1-0.15 秒
整体入场总时长:0.4-0.6 秒
时间轴示例:
0-0.2 秒:遮罩淡入
0.05-0.25 秒:底板缩放弹出
0.15-0.35 秒:标题从上方滑入
0.2-0.4 秒:图标淡入
0.3-0.5 秒:两个按钮同时从下方滑入
适用场景:背包、邮件、普通奖励弹窗
元素构成:遮罩 + 底板 + 大标题 + 主视觉 + 描述文字 + 3 个以上按钮 + 装饰元素
单个元素时长:0.2-0.3 秒
元素间时间差:0.1-0.2 秒
整体入场总时长:0.6-0.9 秒
时间轴示例:
0-0.25 秒:遮罩淡入
0.05-0.3 秒:底板缩放弹出(0→1.2→1)
0.2-0.45 秒:大标题炸开出现(缩放 + 位移)
0.3-0.55 秒:主视觉(如角色、武器)旋转飞入
0.4-0.6 秒:描述文字逐行淡入
0.5-0.75 秒:按钮组从下方滑入
0.6-0.8 秒:装饰粒子效果出现
适用场景:升级弹窗、成就解锁、单物品高级奖励
元素构成:复杂奖励弹窗、抽卡结果、活动主界面
单个元素时长:0.2-0.3 秒
元素间时间差:0.1-0.2 秒
分组动效:将元素分成 2-3 组,组内同时动,组间错峰
整体入场总时长:0.9-1.2 秒
关键技巧:主元素用完整动效,次元素用简化动效。比如 10 个奖励物品,不要每个都做完整的缩放弹出,而是前 3 个做完整动效,后面 7 个用快速淡入 + 小位移。
适用场景:多物品奖励弹窗、抽卡十连结果、活动主界面
2.多元素弹窗的核心原则:错峰 + 分组,避免 "一锅粥"
这是解决 "很多东西要入场但又不想慢" 的关键,90% 的动效卡顿感都来自于元素同时动或者时间差太小。
两个相邻元素的入场开始时间,最佳间隔是 0.1 秒。
这个时间差刚好能让玩家感知到先后顺序,但又不会觉得拖沓。
小于 0.05 秒:看起来像同时动,没有层次感;大于 0.15 秒:会有明显的停顿感。
将弹窗元素按重要性分成 3 组,组内同时动,组间间隔 0.1 秒:
第一组(0-0.3 秒):基础层
元素:遮罩、底板、背景装饰
动效:快速淡入、缩放
作用:搭建弹窗的整体框架
第二组(0.1-0.4 秒):核心信息层
元素:标题、主视觉、核心数值
动效:完整的缩放、位移、粒子效果
作用:吸引玩家的主要注意力
第三组(0.2-0.5 秒):操作层
元素:按钮、描述文字、次要信息
动效:简单的淡入、小位移
作用:提供操作入口和补充信息
效果:整个弹窗看起来是 "一气呵成" 的,但实际上有清晰的视线引导,玩家会自动先看核心信息,再看操作按钮。
第一组元素:动效能量中等(快速、简洁)文字类信息,面板层等
第二组元素:动效能量最高(幅度大、复杂度高、有音效)一般是靠近镜头的元素
第三组元素:动效能量最低(缓慢、简单、无音效)一般是远离镜头的元素
这样即使有 10 个元素同时入场,玩家的视线也会被能量最高的核心信息吸引,不会觉得混乱
规律:所有主流游戏的单个元素时长都严格控制在 0.2-0.25 秒,但通过 0.1 秒的时间差和分组动效,整体入场总时长可以轻松达到 1 秒左右,既保证了动效的丰富度,又不会觉得慢。
做好动效后,把速度放慢到 0.5 倍播放。如果你能清晰地看到每个元素的入场顺序和动效过程,那么正常速度下玩家的体验就是舒适的。如果放慢后看起来还是一团糟,那正常速度下玩家只会觉得混乱。
绝对不要让所有元素同时入场,哪怕只有 3 个元素,也要加 0.05-0.1 秒的时间差。
绝对不要让单个元素的动效时长超过 0.3 秒,否则会有 "慢动作" 的感觉。
绝对不要在一个弹窗内混用多种不同的缓动曲线,主元素用什么曲线,所有元素都用什么曲线。
不要为了快而快:如果一个复杂弹窗强行压缩到 0.5 秒以内,所有元素会挤在一起,玩家根本看不清信息,反而适得其反。
音效要和动效峰值对齐:核心元素的动效达到最高点时,音效也要同时响起,这样会让动效看起来更快更有力。