local MainLeftTop = {}
local UI_config = {
{name = "shijieditu", x = -720, y = -7, res = "res\\yidalu\\dingbuanniu/000000.png", cmd = {1234, 6001}},
{name = "gonglue", x = -320, y = -7, res = "res\\yidalu\\dingbuanniu/000008.png", cmd = {123
我来帮你创建一个流畅的收起/展开动画。根据浮生梦老师前端课程内容,我们可以使用动作序列来实现平滑的动画效果。
```lua
-- 在MainLeftTop模块中添加动画相关函数
function MainLeftTop:createAnimation()
-- 存储需要动画的按钮
self.animButtons = {}
-- 找出需要动画的按钮(除了aaa、ssss、cccc)
for k, v in ipairs(UI_config) do
if v.name ~= "aaa" and v.name ~= "ssss" and v.name ~= "cccc" then
self.animButtons[#self.animButtons + 1] = v.name
end
end
end
-- 展开动画
function MainLeftTop:expandAnimation(topNode)
if not topNode or GUI:Win_IsNull(topNode) then
return
end
-- 先设置可见
GUI:setVisible(topNode, true)
GUI:setOpacity(topNode, 0)
-- 淡入动画
GUI:runAction(topNode, GUI:ActionFadeTo(0.3, 255))
-- 每个按钮的展开动画(延迟依次出现)
for i, btnName in ipairs(self.animButtons) do
local btn = GUI:getChildByName(topNode, btnName)
if not GUI:Win_IsNull(btn) then
-- 先设置初始状态
GUI:setVisible(btn, true)
GUI:setOpacity(btn, 0)
GUI:setScale(btn, 0.5)
-- 延迟动画
local delay = (i - 1) * 0.05 -- 每个按钮延迟0.05秒
local actions = GUI:ActionSequence(
GUI:DelayTime(delay),
GUI:ActionSpawn(
GUI:ActionFadeTo(0.2, 255),
GUI:ActionScaleTo(0.2, 1.0)
)
)
GUI:runAction(btn, actions)
end
end
-- 固定位置的按钮(aaa、ssss、cccc)直接显示
local fixedButtons = {"aaa", "ssss", "cccc"}
for _, btnName in ipairs(fixedButtons) do
local btn = GUI:getChildByName(topNode, btnName)
if not GUI:Win_IsNull(btn) then
GUI:setVisible(btn, true)
GUI:setOpacity(btn, 255)
GUI:setScale(btn, 1.0)
end
end
end
-- 收起动画
function MainLeftTop:collapseAnimation(topNode)
if not topNode or GUI:Win_IsNull(topNode) then
return
end
-- 每个按钮的收起动画(反向延迟)
for i, btnName in ipairs(self.animButtons) do
local btn = GUI:getChildByName(topNode, btnName)
if not GUI:Win_IsNull(btn) then
local delay = (#self.animButtons - i) * 0.05 -- 反向延迟
local actions = GUI:ActionSequence(
GUI:DelayTime(delay),
GUI:ActionSpawn(
GUI:ActionFadeTo(0.15, 0),
GUI:ActionScaleTo(0.15, 0.5)
),
GUI:CallFunc(function()
GUI:setVisible(btn, false)
end)
)
GUI:runAction(btn, actions)
end
end
-- 固定位置的按钮移动到SUOFANG按钮旁边
local fixedButtons = {"aaa", "ssss", "cccc"}
local parent = GUI:Attach_RightTop()
local suofangBtn = GUI:getChildByName(parent, "SUOFANG")
if not GUI:Win_IsNull(suofangBtn) then
local suofangPos = GUI:getPosition(suofangBtn)
-- 计算固定按钮的新位置(在SUOFANG按钮旁边)
local offsets = {
{x = -80, y = 0}, -- aaa在左边
{x = -40, y = 0}, -- ssss在中左
{x = 0, y = 0} -- cccc在中间
}
for idx, btnName in ipairs(fixedButtons) do
local btn = GUI:getChildByName(topNode, btnName)
if not GUI:Win_IsNull(btn) then
local newX = suofangPos.x + offsets[idx].x
local newY = suofangPos.y + offsets[idx].y
local actions = GUI:ActionSequence(
GUI:DelayTime(0.3), -- 等待其他按钮收起
GUI:ActionMoveTo(0.2, newX, newY)
)
GUI:runAction(btn, actions)
end
end
end
-- 最后淡出整个topNode
SL:ScheduleOnce(function()
if not GUI:Win_IsNull(topNode) then
GUI:runAction(topNode,
GUI:ActionSequence(
GUI:ActionFadeTo(0.2, 0),
GUI:CallFunc(function()
GUI:setVisible(topNode, false)
end)
)
)
end
end, 0.5)
end
-- 修改SUOFANG按钮的点击事件
function MainLeftTop:setupSuofangButton(parent, topNode)
local oldBtn = GUI:getChildByName(parent, "SUOFANG")
if not GUI:Win_IsNull(oldBtn) then
GUI:removeFromParent(oldBtn)
end
local btn = GUI:Button_Create(parent, "SUOFANG", -300, -90, "res\\yidalu\\dingbuanniu/000011.png")
if not GUI:Win_IsNull(btn) then
GUI:setTag(btn, 1) -- 1表示展开状态
GUI:addOnClickEvent(btn, function()
local currentTag = GUI:getTag(btn)
if currentTag == 1 then -- 当前是展开状态,要收起
-- 切换到收起图标
GUI:Button_loadTextureNormal(btn, "res\\yidalu\\dingbuanniu/000010.png")
GUI:setTag(btn, 0)
-- 执行收起动画
self:collapseAnimation(topNode)
else -- 当前是收起状态,要展开
-- 切换到展开图标
GUI:Button_loadTextureNormal(btn, "res\\yidalu\\dingbuanniu/000011.png")
GUI:setTag(btn, 1)
-- 执行展开动画
self:expandAnimation(topNode)
end
end)
end
end
-- 修改main函数
function MainLeftTop.main()
SL:ScheduleOnce(function()
local parent = GUI:Attach_RightTop()
if GUI:Win_IsNull(parent) then
return
end
local w = SL:GetMetaValue("SCREEN_WIDTH") or 800
local h = SL:GetMetaValue("SCREEN_HEIGHT") or 600
local oldNode = GUI:getChildByName(parent, "shenyusuo")
if not GUI:Win_IsNull(oldNode) then
GUI:removeFromParent(oldNode)
end
local topNode = GUI:Widget_Create(parent, "shenyusuo", 0, 0, w, 100)
-- 初始化动画系统
MainLeftTop:createAnimation()
-- 创建所有按钮(初始状态为收起)
for k, v in ipairs(UI_config) do
local posX = v.x
if type(v.x) == "number" and v.x >= 0 and v.x <= 1 then
posX = w * v.x
end
local oldBtn = GUI:getChildByName(topNode, v.name)
if not GUI:Win_IsNull(oldBtn) then
GUI:removeFromParent(oldBtn)
end
local btn = GUI:Button_Create(topNode, v.name, posX, v.y, v.res)
if not GUI:Win_IsNull(btn) then
GUI:setAnchorPoint(btn, 1, 1)
-- 初始设置为收起状态(除了固定按钮)
if v.name ~= "aaa" and v.name ~= "ssss" and v.name ~= "cccc" then
GUI:setVisible(btn, false)
GUI:setOpacity(btn, 0)
GUI:setScale(btn, 0.5)
end
GUI:addOnClickEvent(btn, function()
if v.cmd and #v.cmd >= 2 then
SL:SendLuaNetMsg(v.cmd[1], v.cmd[2], 0, 0, "")
end
SL:Require("GUILayout/NPC/"..v.name..".lua", true)
end)
end
end
-- 设置SUOFANG按钮(初始状态为展开)
MainLeftTop:setupSuofangButton(parent, topNode)
-- 初始执行展开动画
MainLeftTop:expandAnimation(topNode)
end, 1.0)
end
```
这个动画实现有以下特点:
1. **流畅的展开动画**:
- 整个面板淡入显示
- 每个按钮依次淡入+缩放出现(间隔0.05秒)
- 使用`ActionSpawn`让淡入和缩放同时进行
2. **流畅的收起动画**:
- 按钮依次淡出+缩小(反向顺序)
- 固定按钮(aaa、ssss、cccc)移动到SUOFANG按钮旁边
- 整个面板最后淡出
3. **固定按钮处理**:
- aaa、ssss、cccc始终可见
- 收起时移动到SUOFANG按钮旁边排列
- 展开时回到原位置
4. **动画参数可调**:
- 淡入淡出时间:0.2-0.3秒
- 缩放时间:0.15-0.2秒
- 按钮间隔延迟:0.05秒
注意:动画效果可能需要根据实际屏幕尺寸调整位置参数,特别是固定按钮移动到SUOFANG旁边的偏移量。