逐帧入场动画是防止动画首帧闪烁的一个解法

精华04/14109 浏览开发交流

作者：浠涫的攻略机

#TapTap制造 #开发心得 #动画

为什么首帧会闪烁？

在游戏开发中，很多人都遇到过这样的问题：弹窗、浮窗、卡片入场时，首帧会闪一下完整状态，然后再开始动画，体验很差！

问题背景

在《节拍前夜》中，我们也遇到了同样的问题：

技艺大卡悬浮浮窗首帧闪烁：打开时先闪一下完整状态，然后才开始缩小+透明的入场动画

屏幕过渡转场首帧闪烁：黑幕刚出现时先闪一下完全覆盖，然后才开始渐变

各种弹窗首帧闪烁：菜单、设置面板、图鉴、立绘等都有这个问题

为什么 transition 会导致闪烁？

嗒啦啦喜欢用 UI 的 transition 属性做动画，比如：

-- 看起来很简单，但会闪烁！ local panel = UI.Panel { scale = 0.85, opacity = 0, transition = "scale 0.2s easeOut, opacity 0.2s easeOut", } -- 打开时设置完整状态 panel:SetStyle({ scale = 1, opacity = 1 })

问题所在：

第一帧：panel 先渲染出完整状态（scale=1, opacity=1）

然后 transition 才开始执行，从完整状态往回做动画

玩家就会看到"闪一下"，体验很差

解决方案：逐帧手动插值

与其依赖 transition 系统，不如自己在 Update 中逐帧手动插值！

核心思路

首帧就设置动画的初始状态：不要等 transition，直接设置 scale=0.85, opacity=0

在 Update 中逐帧计算：用 dt 累加时间，用缓动函数计算当前值

首帧就是正确的初始状态：不会闪一下完整状态

逐帧入场动画完整实现

让我结合《节拍前夜》的 SkillDetailModal 来看看完整的实现！

1. 首帧就设置初始状态

-- 逐帧入场动画（手动插值，不用 transition，防止首帧闪烁） local ANIM_DUR = 0.22 -- 动画时长（秒） local OVERLAY_ALPHA_MAX = 160 -- 遮罩目标透明度 local CONTENT_SCALE_FROM = 0.85 local animTime = 0 local animDone = false -- 内容初始状态：缩小 + 透明（首帧就用插值值，不会闪末态） contentWidget:SetStyle({ scale = CONTENT_SCALE_FROM, opacity = 0 })

关键技巧：

不要用 transition 属性

直接在创建后第一帧就设置动画的起始状态

玩家看到的第一帧就是正确的初始状态

2. 覆写 Update 做逐帧插值

local origUpdate = overlay_.Update overlay_.Update = function(self, dt) if origUpdate then origUpdate(self, dt) end if animDone then return end -- 累加时间 animTime = animTime + dt local t = math.min(animTime / ANIM_DUR, 1.0) -- 缓动函数：easeOutQuad（快起缓落） local ease = 1.0 - (1.0 - t) * (1.0 - t) -- 遮罩背景渐入 local bgAlpha = math.floor(OVERLAY_ALPHA_MAX * ease + 0.5) self:SetStyle({ backgroundColor = { 0, 0, 0, bgAlpha } }) -- 内容缩放 + 透明度 local curScale = CONTENT_SCALE_FROM + (1.0 - CONTENT_SCALE_FROM) * ease contentWidget:SetStyle({ scale = curScale, opacity = ease }) -- 动画完成标志 if t >= 1.0 then animDone = true end end

技术要点：

覆写 Update：在原有 Update 基础上叠加我们的动画逻辑

dt 累加：确保动画时长精确，不受帧率影响

缓动函数：easeOutQuad 让动画更自然

SetStyle 逐帧调用：每一帧都更新样式

animDone 标志：动画完成后停止计算，提升性能

3. 完整代码示例

-- 打开技艺详情浮窗 function SkillDetailModal.Open(skill, opts) opts = opts or {} if overlay_ then SkillDetailModal.Close() end -- ... 创建 overlay_ 和 contentWidget ... -- ── 逐帧入场动画（手动插值，不用 transition，防止首帧闪烁）── local ANIM_DUR = 0.22 -- 动画时长（秒） local OVERLAY_ALPHA_MAX = 160 -- 遮罩目标透明度 local CONTENT_SCALE_FROM = 0.85 local animTime = 0 local animDone = false -- 内容初始状态：缩小 + 透明（首帧就用插值值，不会闪末态） contentWidget:SetStyle({ scale = CONTENT_SCALE_FROM, opacity = 0 }) local origUpdate = overlay_.Update overlay_.Update = function(self, dt) if origUpdate then origUpdate(self, dt) end if animDone then return end animTime = animTime + dt local t = math.min(animTime / ANIM_DUR, 1.0) local ease = 1.0 - (1.0 - t) * (1.0 - t) -- easeOutQuad -- 遮罩背景渐入 local bgAlpha = math.floor(OVERLAY_ALPHA_MAX * ease + 0.5) self:SetStyle({ backgroundColor = { 0, 0, 0, bgAlpha } }) -- 内容缩放 + 透明度 local curScale = CONTENT_SCALE_FROM + (1.0 - CONTENT_SCALE_FROM) * ease contentWidget:SetStyle({ scale = curScale, opacity = ease }) if t >= 1.0 then animDone = true end end -- 播放弹出音效 AudioManager.PlaySFX("audio/screen_whoosh.ogg", 0.5) end

常用缓动函数

缓动函数让动画更自然，这里有几个常用的：

1. easeOutQuad（快起缓落）

-- easeOutQuad：1 - (1 - t) * (1 - t) -- 适用于：入场动画、弹出效果 local ease = 1.0 - (1.0 - t) * (1.0 - t)

2. easeInQuad（缓起渐快）

-- easeInQuad：t * t -- 适用于：退场动画、关闭效果 local ease = t * t

3. easeInOutQuad（缓起缓落）

-- easeInOutQuad：t < 0.5 ? 2*t*t : -1 + (4-2*t)*t -- 适用于：循环动画、对称效果 local ease if t < 0.5 then ease = 2 * t * t else ease = -1 + (4 - 2 * t) * t end

4. 线性（无缓动）

-- 线性：t -- 适用于：匀速动画、进度条 local ease = t

怎么在你的游戏中实现？

作为萌新开发者，你不需要自己手写所有代码，直接让嗒啦啦（AI）帮你搞定！

第一步：让嗒啦啦帮你分析问题

在对话框里直接说：

嗒啦啦，我的弹窗/浮窗/卡片打开时首帧会闪烁，帮我分析一下问题！

第二步：让嗒啦啦帮你实现逐帧动画

然后说：

嗒啦啦，帮我把这个动画改成逐帧手动插值的方式，防止首帧闪烁！要求： 1. 首帧就设置动画的初始状态（scale=0.85, opacity=0） 2. 在 Update 中逐帧计算，用 dt 累加时间 3. 用 easeOutQuad 缓动函数 4. 动画时长 0.2-0.3 秒

嗒啦啦会帮你：

移除 transition 属性

添加初始状态设置

覆写 Update 做逐帧插值

添加缓动函数

第三步：让嗒啦啦帮你优化效果

接着说：

嗒啦啦，帮我调整一下动画参数，让效果更好！ - 遮罩目标透明度多少合适？ - 缩放起始值多少自然？ - 动画时长多少体验好？

这样一套完整的逐帧入场动画就搞定了！

实战应用：不同场景的参数推荐

1. 悬浮浮窗（SkillDetailModal）

-- 参数推荐 local ANIM_DUR = 0.22 -- 稍快，响应及时 local OVERLAY_ALPHA_MAX = 160 -- 半透明，不遮挡背景太多 local CONTENT_SCALE_FROM = 0.85 -- 从 85% 缩放到 100%

2. 屏幕过渡转场（ScreenTransition）

-- ScreenTransition 中的实现 function ScreenTransition:Update(dt) if state_ == "closing" then timer_ = timer_ + dt local t = math.min(timer_ / CLOSE_DURATION, 1.0) coverAmount_ = easeInQuad(t) -- 0 -> 1，缓起渐快 -- ... elseif state_ == "opening" then timer_ = timer_ + dt local t = math.min(timer_ / OPEN_DURATION, 1.0) coverAmount_ = 1.0 - easeOutCubic(t) -- 1 -> 0，快起缓落 -- ... end end

关键技巧：

closing 用 easeInQuad：缓起渐快，黑幕慢慢盖过来

opening 用 easeOutCubic：快起缓落，黑幕快速拉开，体验更流畅

3. 普通弹窗（Modal、Dialog）

-- 普通弹窗参数推荐 local ANIM_DUR = 0.18 -- 更快，即时响应 local OVERLAY_ALPHA_MAX = 180 -- 稍暗，突出弹窗 local CONTENT_SCALE_FROM = 0.9 -- 从 90% 缩放，变化更微妙

4. 小提示、tooltip

-- tooltip 参数推荐 local ANIM_DUR = 0.12 -- 非常快，不要打断用户操作 local OVERLAY_ALPHA_MAX = 0 -- 不需要遮罩 local CONTENT_SCALE_FROM = 0.95 -- 从 95% 缩放，几乎不明显 local CONTENT_OPACITY_FROM = 0.7 -- 从 70% 透明度开始

我们的踩坑记录和解决方案

在实现逐帧入场动画的过程中，我们也踩了一些坑：

1. 坑：忘记调用 origUpdate

问题：覆写 Update 后，原有的 Update 逻辑不执行了！

解决方案：

-- 记得先调用原有的 Update！ local origUpdate = overlay_.Update overlay_.Update = function(self, dt) if origUpdate then origUpdate(self, dt) end -- 先调用原有的 -- ... 再执行我们的动画逻辑 end

2. 坑：动画完成后还在计算

问题：动画完成后，Update 还在每一帧计算，浪费性能！

解决方案：

-- 加个 animDone 标志，动画完成后直接 return local animDone = false overlay_.Update = function(self, dt) if origUpdate then origUpdate(self, dt) end if animDone then return end -- 动画完成，直接返回 -- ... 动画逻辑 if t >= 1.0 then animDone = true end -- 动画完成，设置标志 end

3. 坑：透明度值不是整数

问题：bgAlpha 用浮点数，看起来不够精确！

解决方案：

-- 加个 math.floor + 0.5 四舍五入 local bgAlpha = math.floor(OVERLAY_ALPHA_MAX * ease + 0.5)

4. 坑：缓动函数用错了

问题：入场用 easeInQuad，退场用 easeOutQuad，体验很奇怪！

解决方案：

入场动画：用 easeOutQuad（快起缓落）

退场动画：用 easeInQuad（缓起渐快）

循环动画：用 easeInOutQuad（缓起缓落）

最佳实践建议

1. 合理选择动画时长