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:24:04 |
👁️ 阅读: 12
我来帮你给这10个按钮添加卡牌翻面效果。根据浮生梦老师前端课程内容中的卡牌翻转案例，我来修改你的代码：
```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 frontImages = {
"res/01/010012.jpg", -- 正面图片1
"res/01/010013.jpg", -- 正面图片2
"res/01/010014.jpg", -- 正面图片3
"res/01/010015.jpg", -- 正面图片4
"res/01/010016.jpg", -- 正面图片5
"res/01/010017.jpg", -- 正面图片6
"res/01/010018.jpg", -- 正面图片7
"res/01/010019.jpg", -- 正面图片8
"res/01/010020.jpg", -- 正面图片9
"res/01/010021.jpg" -- 正面图片10
}
-- 卡牌翻转动画函数
local function flipCardAnimation(backBtn, frontImg, index)
-- 创建正面图片
local frontImage = GUI:Image_Create(layout, "front_"..index, 0, 0, frontImages[index])
GUI:setAnchorPoint(frontImage, 0.5, 0.5)
local backPos = GUI:getPosition(backBtn)
local backSize = GUI:getContentSize(backBtn)
GUI:setPosition(frontImage, backPos.x, backPos.y)
GUI:setContentSize(frontImage, backSize.width, backSize.height)
GUI:setVisible(frontImage, false)
-- 设置背面卡牌的锚点为中心
GUI:setAnchorPoint(backBtn, 0.5, 0.5)
local ScaleX = 1
local flipSpeed = 0.05 -- 翻转速度
-- 使用schedule实现逐帧动画
GUI:schedule(backBtn, function()
if ScaleX > 0 then
ScaleX = ScaleX - 0.1 -- 每次减少10%
GUI:setScaleX(backBtn, ScaleX)
end
if ScaleX <= 0.05 then
-- 当背面缩小到几乎看不见时，显示正面
GUI:setVisible(frontImage, true)
GUI:setVisible(backBtn, false)
GUI:unSchedule(backBtn)
-- 正面从0开始放大
GUI:setScaleX(frontImage, 0.05)
local frontScale = 0.05
-- 正面放大动画
GUI:schedule(frontImage, function()
if frontScale < 1 then
frontScale = frontScale + 0.1
GUI:setScaleX(frontImage, frontScale)
else
GUI:setScaleX(frontImage, 1)
GUI:unSchedule(frontImage)
SL:print("卡牌"..index.."翻转完成！")
end
end, flipSpeed)
end
end, flipSpeed)
end
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['Image_'..i])
table.insert(b, i, {width = chi.width, height = chi.height})
GUI:removeFromParent(ui['Image_'..i])
-- 创建背面按钮
local beimian = GUI:Button_Create(layout, "bei"..i, t[i].x, t[i].y, "res/public_win32/1900000610.png")
GUI:setContentSize(beimian, b[i].width, b[i].height)
GUI:setVisible(beimian, true)
GUI:setAnchorPoint(beimian, 0.5, 0.5)
-- 为每个按钮绑定翻转动画
GUI:addOnClickEvent(beimian, function()
SL:print('点击了卡牌'..i)
flipCardAnimation(beimian, frontImages[i], i)
end)
end
GUI:removeFromParent(ui.Button_1)
end)
end
```
**主要修改说明：**
1. **翻转动画逻辑**：参考了课程中的卡牌翻转案例，使用`GUI:setScaleX()`实现水平缩放效果
2. **动画流程**：
- 背面卡牌从1缩小到0（水平缩放）
- 当背面几乎看不见时，显示正面卡牌
- 正面卡牌从0放大到1
3. **锚点设置**：`GUI:setAnchorPoint(backBtn, 0.5, 0.5)`确保以中心点进行缩放
4. **逐帧动画**：使用`GUI:schedule()`实现平滑的动画效果
5. **正面图片**：为每个卡牌准备了不同的正面图片，你可以替换成自己的图片路径
**注意事项：**
- 翻转速度可以通过调整`flipSpeed`变量控制
- 正面图片路径需要根据你的实际资源修改
- 确保所有卡牌尺寸一致，翻转效果会更协调
如果你需要调整动画速度或者添加翻转完成后的回调，可以进一步修改`flipSpeed`参数或者在动画结束后添加其他逻辑。
← 返回问答库