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, fal
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-04-20 14:57:07 |
👁️ 阅读: 9
根据你提供的代码和需求，我来帮你实现卡牌动画效果。你需要在移动到(-72,-103)后，让卡牌上下分开再合拢，然后左右分开再合拢。
```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))
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)
-- 第一步：移动到中心点(-72, -103)
GUI:runAction(beimian, GUI:ActionSequence(
GUI:ActionMoveTo(1, -72, -103),
GUI:DelayTime(0.5), -- 停顿0.5秒
-- 第二步：上下分开动画
GUI:CallFunc(function()
-- 根据卡牌索引决定上下移动方向
local targetY = -103
if i % 2 == 1 then -- 奇数编号卡牌往上
targetY = -103 + 172
else -- 偶数编号卡牌往下
targetY = -103 - 172
end
-- 上下移动
GUI:runAction(beimian, 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 % 2 == 1 then -- 奇数编号卡牌往左
targetX = -72 - 142
else -- 偶数编号卡牌往右
targetX = -72 + 142
end
-- 左右移动
GUI:runAction(beimian, GUI:ActionSequence(
GUI:ActionMoveTo(0.5, targetX, -103),
GUI:DelayTime(0.3),
GUI:ActionMoveTo(0.5, -72, -103)
))
end)
))
end)
))
end
end)
end
```
**代码说明：**
1. **动画流程**：
- 第1秒：所有卡牌移动到中心点(-72, -103)
- 停顿0.5秒
- 第2步：奇数编号卡牌往上172，偶数编号卡牌往下172，然后回到中心
- 停顿0.5秒
- 第3步：奇数编号卡牌往左142，偶数编号卡牌往右142，然后回到中心
2. **关键函数**：
- `GUI:ActionSequence()`：用于按顺序执行多个动作
- `GUI:DelayTime()`：动作之间的延迟
- `GUI:CallFunc()`：在动作序列中插入回调函数
- `GUI:ActionMoveTo()`：移动到指定坐标的动画
3. **逻辑设计**：
- 使用`i % 2`来判断卡牌是奇数还是偶数编号
- 奇数编号卡牌：先上移后左移
- 偶数编号卡牌：先下移后右移
- 每个动画步骤都有0.3秒的停顿，让用户能看到分开的状态
这样就能实现你要求的卡牌动画效果了！记得在实际使用前测试一下动画时间和坐标是否正确。
← 返回问答库