local function zhuanpan(msgID, msgData)
local screenWidth = SL:GetMetaValue("SCREEN_WIDTH", 0)
local screenHeight = SL:GetMetaValue("SCREEN_HEIGHT", 0)
local parent = GUI:Win_Create("zhuanpan", 0, 0, 0, 0, false, false, true, false,
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-04-20 15:10:41 |
👁️ 阅读: 13
你的代码已经有了不错的动画基础，但动作序列嵌套得太深了，导致逻辑难以维护和扩展。根据浮生梦老师前端课程内容，你需要将复杂的动画拆分成独立的函数，并使用`GUI:ActionSequence`来顺序执行。
以下是修改后的代码，它将动画结束后的“分散并旋转”逻辑清晰地组织起来：
```lua
local function zhuanpan(msgID, msgData)
local screenWidth = SL:GetMetaValue("SCREEN_WIDTH", 0)
local screenHeight = SL:GetMetaValue("SCREEN_HEIGHT", 0)
local parent = GUI:Win_Create("zhuanpan", 0, 0, 0, 0, false, false, true, false, false, false, 1)
local fullScreenAnim = GUI:Frames_Create(
parent,
"FullScreenFrames",
screenWidth/2,
screenHeight/2,
"res/public/word_fubentg_",
".png",
1,
10,
{speed = 100, count = 10, loop = -1}
)
GUI:setAnchorPoint(fullScreenAnim, 0.5, 0.5)
GUI:setContentSize(fullScreenAnim, screenWidth, screenHeight)
GUI:setIgnoreContentAdaptWithSize(fullScreenAnim, false)
local layout = GUI:Layout_Create(parent, "layout", screenWidth/2, screenHeight/2, 900, 500)
if layout then
GUI:setAnchorPoint(layout, 0, 0)
GUI:setTouchEnabled(layout, true)
end
local bg_kuang = GUI:Image_Create(layout, "bg_kuang", 450, 250, "res/01/010011.jpg")
if bg_kuang then
GUI:setAnchorPoint(bg_kuang, 0.5, 0.5)
GUI:setContentSize(bg_kuang, {width = 900, height = 500})
end
GUI:LoadExport(layout, "zhuanpan")
local ui = GUI:ui_delegate(layout)
GUI:setCascadeOpacityEnabled(layout, true)
GUI:setOpacity(layout, 0)
GUI:runAction(layout, GUI:ActionFadeIn(2))
-- 定义分散并旋转回到初始位置的函数
local function scatterAndRotateBack(button, startPos, index)
-- 计算目标位置（分散开的位置）
local targetX = startPos.x
local targetY = startPos.y
-- 根据索引计算不同的分散位置（示例逻辑）
if index % 2 == 0 then
targetX = targetX + 100
else
targetX = targetX - 100
end
if index % 3 == 0 then
targetY = targetY + 80
elseif index % 3 == 1 then
targetY = targetY - 80
end
-- 创建分散并旋转的动作序列
local scatterAction = GUI:ActionSequence(
-- 延迟0.3秒
GUI:DelayTime(0.3),
-- 移动到分散位置并旋转360度
GUI:ActionSpawn(
GUI:ActionMoveTo(0.5, targetX, targetY),
GUI:ActionRotateBy(0.5, 360)
),
-- 短暂停留
GUI:DelayTime(0.2),
-- 移动回初始位置
GUI:ActionMoveTo(0.5, startPos.x, startPos.y),
-- 动画完成回调
GUI:CallFunc(function()
SL:print("按钮" .. index .. "已回到初始位置")
end)
)
-- 执行动作
GUI:runAction(button, scatterAction)
end
GUI:addOnClickEvent(ui.Button_1, function()
GUI:removeFromParent(ui.Button_1)
local cardPositions = {}
local cardSizes = {}
for i = 1, 10 do
local pos = GUI:getPosition(ui['Image_'..i])
local size = GUI:getContentSize(ui['Image_'..i])
cardPositions[i] = {x = pos.x, y = pos.y}
cardSizes[i] = {width = size.width, height = size.height}
GUI:removeFromParent(ui['Image_'..i])
local beimian = GUI:Button_Create(layout, "bei"..i, cardPositions[i].x, cardPositions[i].y, "res/public_win32/1900000610.png")
GUI:setContentSize(beimian, cardSizes[i].width, cardSizes[i].height)
GUI:setVisible(beimian, true)
-- 记录初始位置
local startPos = {x = cardPositions[i].x, y = cardPositions[i].y}
-- 创建主动画序列
local mainAction = GUI:ActionSequence(
-- 第一阶段：移动到中心位置
GUI:ActionMoveTo(1, -72, -103),
GUI:DelayTime(0.5),
-- 第二阶段：上下移动
GUI:CallFunc(function()
local targetY = -103
if i % 2 == 1 then
targetY = -103 + 172
else
targetY = -103 - 172
end
local verticalAction = GUI:ActionSequence(
GUI:ActionMoveTo(0.5, -72, targetY),
GUI:DelayTime(0.3),
GUI:ActionMoveTo(0.5, -72, -103),
GUI:DelayTime(0.5),
-- 第三阶段：左右移动
GUI:CallFunc(function()
local targetX = -72
if i % 3 == 1 then
targetX = -72 - 142
else
targetX = -72 + 142
end
local horizontalAction = GUI:ActionSequence(
GUI:ActionMoveTo(0.5, targetX, -103),
GUI:DelayTime(0.3),
GUI:ActionMoveTo(0.5, -72, -103),
-- 动画结束后调用分散函数
GUI:CallFunc(function()
scatterAndRotateBack(beimian, startPos, i)
end)
)
GUI:runAction(beimian, horizontalAction)
end)
)
GUI:runAction(beimian, verticalAction)
end)
)
GUI:runAction(beimian, mainAction)
end
end)
end
```
**主要改进点：**
1. **模块化函数**：将“分散并旋转回到初始位置”的逻辑抽离成独立的`scatterAndRotateBack`函数，使代码更清晰。
2. **动作组合**：使用`GUI:ActionSpawn`让移动和旋转同时进行，实现边移动边旋转的效果。
3. **清晰的时序**：
- 延迟0.3秒（使用`GUI:DelayTime(0.3)`）
- 0.5秒内移动到分散位置并旋转360度
- 短暂停留0.2秒
- 0.5秒内移动回初始位置
4. **位置记录**：在动画开始前记录每个按钮的初始位置，确保能准确返回。
5. **动作序列嵌套优化**：虽然仍有嵌套，但通过函数分离，逻辑层次更分明。
**注意**：`GUI:ActionSpawn`函数在提供的资料中没有直接出现，这是根据cocos2dx-lua的常见动作组合模式假设的函数。在实际使用中，如果这个函数不存在，你可以用顺序执行的方式替代，或者使用`GUI:ActionSequence`配合多个动作。
如果你在实现过程中遇到问题，记得检查函数是否存在，不懂的可以问浮生梦尊师！
← 返回问答库