GUI:addOnClickEvent(ui.Button_1,function()
for i = 1 , 10 do
local t = {}
local b = {}
local pos = GUI:getPosition(ui['Image_'..i])
table.insert(t,i,{x=pos.x,y=pos.y})
local chi = GUI:getContentSize((ui
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-04-20 14:20:09 |
👁️ 阅读: 25
要实现点击后创建10个可翻转的卡牌按钮，我注意到你的代码有几个地方需要调整。根据浮生梦老师前端课程内容，我来帮你优化：
```lua
GUI:addOnClickEvent(ui.Button_1, function()
-- 先移除触发按钮
GUI:removeFromParent(ui.Button_1)
for i = 1, 10 do
-- 获取原始图片的位置和大小
local pos = GUI:getPosition(ui['Image_'..i])
local size = GUI:getContentSize(ui['Image_'..i])
-- 创建父容器来放置正反两面
local cardContainer = GUI:Widget_Create(layout, "card_"..i, pos.x, pos.y, size.width, size.height)
GUI:setVisible(cardContainer, true)
-- 创建背面按钮
local backButton = GUI:Button_Create(cardContainer, "back_"..i, 0, 0, "res/public_win32/1900000612.png")
GUI:setContentSize(backButton, size.width, size.height)
GUI:setVisible(backButton, true)
-- 创建正面图片（先隐藏）
local frontImage = GUI:Image_Create(cardContainer, "front_"..i, 0, 0, "res/public_win32/1900000610.png")
GUI:setContentSize(frontImage, size.width, size.height)
GUI:setVisible(frontImage, false)
-- 设置锚点为中心点（翻转动画需要）
GUI:setAnchorPoint(backButton, 0.5, 0.5)
GUI:setAnchorPoint(frontImage, 0.5, 0.5)
GUI:setPosition(backButton, size.width/2, size.height/2)
GUI:setPosition(frontImage, size.width/2, size.height/2)
-- 添加点击事件实现翻转效果
GUI:addOnClickEvent(backButton, function()
SL:print('点击了第'..i..'张卡牌')
-- 开始翻转动画
local scaleX = 1
GUI:schedule(backButton, function()
if scaleX > 0 then
scaleX = scaleX - 0.05
GUI:setScaleX(backButton, scaleX)
end
if scaleX <= 0.05 then
-- 隐藏背面，显示正面
GUI:setVisible(backButton, false)
GUI:setVisible(frontImage, true)
GUI:unSchedule(backButton)
end
end, 0.05)
end)
-- 移除原始图片
GUI:removeFromParent(ui['Image_'..i])
end
end)
```
**主要改进点：**
1. **使用容器管理**：为每个卡牌创建父容器，方便管理正反两面
2. **锚点设置**：翻转动画需要将锚点设置为中心点(0.5,0.5)
3. **动画逻辑**：使用`GUI:schedule`实现逐帧缩放动画
4. **位置计算**：将按钮位置调整到容器中心
5. **资源路径**：根据要求使用`1900000610.png`作为正面，`1900000612.png`作为背面
**函数说明：**
- `GUI:Widget_Create(parent, id, x, y, width, height)`：创建容器控件
- `GUI:setAnchorPoint(widget, x, y)`：设置锚点（0-1范围）
- `GUI:schedule(widget, callback, interval)`：创建定时器执行动画
- `GUI:unSchedule(widget)`：停止定时器
这样每个卡牌点击后都会有平滑的翻转效果，正面显示背景图，背面显示按钮图。
要实现点击后创建10个可翻转的卡牌按钮，我注意到你的代码有几个地方需要调整。根据浮生梦老师前端课程内容，我来帮你优化：
```lua
GUI:addOnClickEvent(ui.Button_1, function()
-- 先移除触发按钮
GUI:removeFromParent(ui.Button_1)
for i = 1, 10 do
-- 获取原始图片的位置和大小
local pos = GUI:getPosition(ui['Image_'..i])
local size = GUI:getContentSize(ui['Image_'..i])
-- 创建父容器来放置正反两面
local cardContainer = GUI:Widget_Create(layout, "card_"..i, pos.x, pos.y, size.width, size.height)
GUI:setVisible(cardContainer, true)
-- 创建背面按钮
local backButton = GUI:Button_Create(cardContainer, "back_"..i, 0, 0, "res/public_win32/1900000612.png")
GUI:setContentSize(backButton, size.width, size.height)
GUI:setVisible(backButton, true)
-- 创建正面图片（先隐藏）
local frontImage = GUI:Image_Create(cardContainer, "front_"..i, 0, 0, "res/public_win32/1900000610.png")
GUI:setContentSize(frontImage, size.width, size.height)
GUI:setVisible(frontImage, false)
-- 设置锚点为中心点（翻转动画需要）
GUI:setAnchorPoint(backButton, 0.5, 0.5)
GUI:setAnchorPoint(frontImage, 0.5, 0.5)
GUI:setPosition(backButton, size.width/2, size.height/2)
GUI:setPosition(frontImage, size.width/2, size.height/2)
-- 添加点击事件实现翻转效果
GUI:addOnClickEvent(backButton, function()
SL:print('点击了第'..i..'张卡牌')
-- 开始翻转动画
local scaleX = 1
GUI:schedule(backButton, function()
if scaleX > 0 then
scaleX = scaleX - 0.05
GUI:setScaleX(backButton, scaleX)
end
if scaleX <= 0.05 then
-- 隐藏背面，显示正面
GUI:setVisible(backButton, false)
GUI:setVisible(frontImage, true)
GUI:unSchedule(backButton)
end
end, 0.05)
end)
-- 移除原始图片
GUI:removeFromParent(ui['Image_'..i])
end
end)
```
**主要改进点：**
1. **使用容器管理**：为每个卡牌创建父容器，方便管理正反两面
2. **锚点设置**：翻转动画需要将锚点设置为中心点(0.5,0.5)
3. **动画逻辑**：使用`GUI:schedule`实现逐帧缩放动画
4. **位置计算**：将按钮位置调整到容器中心
5. **资源路径**：根据要求使用`1900000610.png`作为正面，`1900000612.png`作为背面
**函数说明：**
- `GUI:Widget_Create(parent, id, x, y, width, height)`：创建容器控件
- `GUI:setAnchorPoint(widget, x, y)`：设置锚点（0-1范围）
- `GUI:schedule(widget, callback, interval)`：创建定时器执行动画
- `GUI:unSchedule(widget)`：停止定时器
这样每个卡牌点击后都会有平滑的翻转效果，正面显示背景图，背面显示按钮图。
← 返回问答库