老三端 前端 需要自己封装一套动画 内容为接收接控件后 对控件进行动画效果 比如右左向右按顺序显示按钮 右上至下按顺序显示按钮 渐显效果 等等 例如在装备强化界面 调用封装动画左侧按钮全部由左向右显现 帮我封装一套 并举例说明\
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-04-22 00:16:24 |
👁️ 阅读: 7
我来帮你封装一套通用的动画系统，专门用于界面控件的顺序显示效果。这套系统可以灵活配置动画方向、延迟时间和动画类型。
```lua
-- 动画系统封装
local AnimationSystem = {}
-- 动画类型枚举
AnimationSystem.AnimationType = {
FADE_IN = 1, -- 渐显
SLIDE_RIGHT = 2, -- 从右向左滑入
SLIDE_LEFT = 3, -- 从左向右滑入
SLIDE_UP = 4, -- 从下向上滑入
SLIDE_DOWN = 5, -- 从上向下滑入
SCALE = 6 -- 缩放显示
}
-- 初始化动画系统
function AnimationSystem:init()
self.animations = {}
end
-- 添加控件到动画队列
-- @param widget: 控件对象
-- @param animType: 动画类型
-- @param delay: 延迟时间（秒）
-- @param duration: 动画持续时间（秒）
function AnimationSystem:addWidget(widget, animType, delay, duration)
if GUI:Win_IsNull(widget) then
SL:Print("错误：控件为空")
return
end
table.insert(self.animations, {
widget = widget,
animType = animType or AnimationSystem.AnimationType.FADE_IN,
delay = delay or 0,
duration = duration or 0.3
})
-- 初始状态设置
self:setInitialState(widget, animType)
end
-- 设置控件的初始状态
function AnimationSystem:setInitialState(widget, animType)
GUI:setVisible(widget, true)
if animType == AnimationSystem.AnimationType.FADE_IN then
GUI:setOpacity(widget, 0)
elseif animType == AnimationSystem.AnimationType.SLIDE_RIGHT then
local pos = GUI:getPosition(widget)
GUI:setPosition(widget, pos.x + 100, pos.y)
elseif animType == AnimationSystem.AnimationType.SLIDE_LEFT then
local pos = GUI:getPosition(widget)
GUI:setPosition(widget, pos.x - 100, pos.y)
elseif animType == AnimationSystem.AnimationType.SLIDE_UP then
local pos = GUI:getPosition(widget)
GUI:setPosition(widget, pos.x, pos.y + 100)
elseif animType == AnimationSystem.AnimationType.SLIDE_DOWN then
local pos = GUI:getPosition(widget)
GUI:setPosition(widget, pos.x, pos.y - 100)
elseif animType == AnimationSystem.AnimationType.SCALE then
GUI:setScale(widget, 0.1, 0.1)
end
end
-- 执行动画队列
-- @param callback: 所有动画完成后的回调函数
function AnimationSystem:play(callback)
if #self.animations == 0 then
if callback then callback() end
return
end
local actionList = {}
local totalDelay = 0
for i, animData in ipairs(self.animations) do
-- 添加延迟
if animData.delay > 0 then
actionList[#actionList + 1] = GUI:DelayTime(animData.delay)
totalDelay = totalDelay + animData.delay
end
-- 添加动画
local animAction = self:createAnimation(animData.widget, animData.animType, animData.duration)
actionList[#actionList + 1] = animAction
-- 最后一个动画完成后执行回调
if i == #self.animations and callback then
actionList[#actionList + 1] = GUI:CallFunc(callback)
end
end
-- 创建父节点执行动画序列
local parent = GUI:Win_Create("AnimationParent", 0, 0, 0, 0, false, false, true, false, false, false, 1)
GUI:runAction(parent, GUI:ActionSequence(actionList))
-- 动画完成后清理父节点
SL:ScheduleOnce(function()
if not GUI:Win_IsNull(parent) then
GUI:removeFromParent(parent)
end
self.animations = {}
end, totalDelay + 1)
end
-- 创建单个动画
function AnimationSystem:createAnimation(widget, animType, duration)
if animType == AnimationSystem.AnimationType.FADE_IN then
return GUI:ActionFadeTo(duration, 255)
elseif animType == AnimationSystem.AnimationType.SLIDE_RIGHT then
local pos = GUI:getPosition(widget)
return GUI:ActionMoveTo(duration, pos.x - 100, pos.y)
elseif animType == AnimationSystem.AnimationType.SLIDE_LEFT then
local pos = GUI:getPosition(widget)
return GUI:ActionMoveTo(duration, pos.x + 100, pos.y)
elseif animType == AnimationSystem.AnimationType.SLIDE_UP then
local pos = GUI:getPosition(widget)
return GUI:ActionMoveTo(duration, pos.x, pos.y - 100)
elseif animType == AnimationSystem.AnimationType.SLIDE_DOWN then
local pos = GUI:getPosition(widget)
return GUI:ActionMoveTo(duration, pos.x, pos.y + 100)
elseif animType == AnimationSystem.AnimationType.SCALE then
return GUI:ActionScaleTo(duration, 1, 1)
end
return GUI:DelayTime(0)
end
-- 快速方法：从左向右顺序显示按钮（装备强化界面示例）
function AnimationSystem:playLeftToRight(widgets, delayPerItem, callback)
self.animations = {}
for i, widget in ipairs(widgets) do
if not GUI:Win_IsNull(widget) then
self:addWidget(widget, AnimationSystem.AnimationType.SLIDE_LEFT, (i-1) * delayPerItem, 0.3)
end
end
self:play(callback)
end
-- 快速方法：从上到下顺序显示按钮
function AnimationSystem:playTopToBottom(widgets, delayPerItem, callback)
self.animations = {}
for i, widget in ipairs(widgets) do
if not GUI:Win_IsNull(widget) then
self:addWidget(widget, AnimationSystem.AnimationType.SLIDE_DOWN, (i-1) * delayPerItem, 0.3)
end
end
self:play(callback)
end
-- 快速方法：渐显效果
function AnimationSystem:playFadeIn(widgets, delayPerItem, callback)
self.animations = {}
for i, widget in ipairs(widgets) do
if not GUI:Win_IsNull(widget) then
self:addWidget(widget, AnimationSystem.AnimationType.FADE_IN, (i-1) * delayPerItem, 0.5)
end
end
self:play(callback)
end
return AnimationSystem
```
**使用示例：装备强化界面左侧按钮动画**
```lua
-- 1. 引入动画系统
local AnimationSystem = require("AnimationSystem")
AnimationSystem:init()
-- 2. 创建装备强化界面
local parent = GUI:Win_Create("EquipEnhanceUI", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 3. 创建左侧按钮（使用案例图片）
local leftButtons = {}
local buttonNames = {"强化", "精炼", "镶嵌", "升星", "转移"}
for i = 1, 5 do
local btn = GUI:Button_Create(parent, "btn_" .. i, 50, 100 + i * 80)
GUI:Button_setTitleText(btn, buttonNames[i])
GUI:Button_setTitleFontSize(btn, 18)
GUI:Button_setTitleColor(btn, "#ffffff")
GUI:setVisible(btn, false) -- 初始隐藏
table.insert(leftButtons, btn)
end
-- 4. 使用动画系统播放从左向右的动画
-- 每个按钮间隔0.2秒，从左向右滑入
AnimationSystem:playLeftToRight(leftButtons, 0.2, function()
SL:Print("所有按钮动画播放完成！")
-- 动画完成后添加点击事件
for i, btn in ipairs(leftButtons) do
GUI:addOnClickEvent(btn, function()
SL:Print("点击了按钮：" .. buttonNames[i])
end)
end
end)
-- 5. 其他动画效果示例
-- 从上到下动画
-- AnimationSystem:playTopToBottom(leftButtons, 0.15)
-- 渐显效果
-- AnimationSystem:playFadeIn(leftButtons, 0.1)
-- 6. 单个控件自定义动画
local specialBtn = GUI:Button_Create(parent, "btn_special", 200, 400)
GUI:Button_setTitleText(specialBtn, "特殊按钮")
GUI:setVisible(specialBtn, false)
-- 添加缩放动画效果
AnimationSystem:addWidget(specialBtn, AnimationSystem.AnimationType.SCALE, 1.0, 0.5)
AnimationSystem:play(function()
SL:Print("特殊按钮动画完成")
end)
```
**封装特点：**
1. **模块化设计**：所有动画逻辑封装在AnimationSystem中
2. **多种动画类型**：支持6种常见动画效果
3. **顺序控制**：可以设置每个控件的延迟时间，实现顺序播放
4. **链式调用**：支持动画完成后的回调函数
5. **错误处理**：自动检查控件是否为空
6. **内存管理**：动画完成后自动清理资源
**使用建议：**
- 对于装备强化这类界面，建议使用`playLeftToRight`方法
- 延迟时间建议0.1-0.3秒，太短会显得急促，太长会让玩家等待
- 可以组合使用不同动画类型，比如主按钮用滑入，次要按钮用渐显
- 记得在界面关闭时调用`GUI:Win_Close(parent)`清理资源
这套动画系统可以让你轻松实现各种界面动画效果，提升游戏界面的视觉体验！
← 返回问答库