点击一个按钮制作卡牌翻面的效果
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-04-20 19:18:45 |
👁️ 阅读: 12
要实现卡牌翻面效果，可以参考浮生梦老师前端课程中的翻转卡牌动画案例。核心思路是：使用两张图片（正面和背面），通过定时器逐步缩小背面图片的X轴缩放值，当缩放接近0时隐藏背面并显示正面。
以下是完整的实现代码：
```lua
-- 创建父节点（如果还没有创建界面）
local parent = GUI:Win_Create("GMMain", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 创建卡牌正面和背面图片（使用指定图片路径）
local backImage = GUI:Image_Create(parent, "Card_01", 100, 100, "res/public/1900000612.png")
local frontImage = GUI:Image_Create(parent, "Reward_01", 100, 100, "res/public/1900000610.png")
-- 创建触发按钮
local button = GUI:Button_Create(parent, "Button_Card_01", 150, 150, "res/public/1900000612.png")
GUI:Button_setTitleText(button, "点击翻牌")
-- 初始化状态
GUI:setVisible(frontImage, false) -- 正面初始隐藏
GUI:setVisible(backImage, true) -- 背面初始显示
GUI:setAnchorPoint(backImage, 0.5, 0.5) -- 设置锚点为中心
GUI:setPosition(backImage, 100, 100) -- 设置位置
-- 翻转卡牌动画函数
local function flipCardAnimation()
-- 设置初始状态
GUI:setScaleX(backImage, 1)
local scaleX = 1
-- 使用定时器实现逐步缩放
GUI:schedule(backImage, function()
if scaleX > 0 then
scaleX = scaleX - 0.05
GUI:setScaleX(backImage, scaleX)
end
if scaleX <= 0.05 then
-- 翻转完成，显示正面，隐藏背面
GUI:setVisible(frontImage, true)
GUI:setVisible(backImage, false)
GUI:unSchedule(backImage) -- 停止定时器
GUI:setVisible(button, false) -- 隐藏按钮
SL:print("卡牌翻转完成！")
end
end, 0.05) -- 每0.05秒执行一次
end
-- 绑定点击事件
GUI:addOnClickEvent(button, flipCardAnimation)
-- 如果需要重置功能，可以添加重置按钮
local resetBtn = GUI:Button_Create(parent, "Button_Reset", 250, 150, "res/public/1900000612.png")
GUI:Button_setTitleText(resetBtn, "重置")
GUI:addOnClickEvent(resetBtn, function()
GUI:setVisible(frontImage, false)
GUI:setVisible(backImage, true)
GUI:setVisible(button, true)
GUI:setScaleX(backImage, 1)
GUI:unSchedule(backImage) -- 确保停止所有定时器
SL:print("卡牌已重置")
end)
```
**关键点说明：**
1. **动画原理**：通过`GUI:schedule`定时器逐步减少背面图片的X轴缩放值（`scaleX`），当缩放接近0时切换显示状态。
2. **锚点设置**：使用`GUI:setAnchorPoint(backImage, 0.5, 0.5)`将锚点设置在图片中心，这样缩放时会以中心为基准。
3. **定时器管理**：动画完成后一定要调用`GUI:unSchedule(backImage)`停止定时器，避免内存泄漏。
4. **状态重置**：如果需要重复翻转，记得重置所有状态（可见性、缩放值等）。
**注意事项：**
- 确保图片路径正确，案例中使用了你指定的图片
- 定时器间隔0.05秒（20帧/秒）可以调整，数值越小动画越平滑
- 如果卡牌位置需要调整，修改`GUI:setPosition`的参数即可
这个效果在登录界面的角色选择中有实际应用，通过视觉上的"翻转"给玩家很好的交互体验。如果想让动画更流畅，可以尝试使用`GUI:runAction`配合`GUI:ActionScaleTo`来实现，但当前方案更简单直观。
← 返回问答库