点击存入英雄背包按钮加一个光圈怎么实现?
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-04-21 15:39:47 |
👁️ 阅读: 17
实现点击“存入英雄背包”按钮时添加光圈效果，可以通过创建动画序列来实现。以下是完整的实现代码：
```lua
-- 首先创建父节点（如果还没有的话）
local parent = GUI:Win_Create("GMMain", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 创建按钮（使用你指定的资源）
local Button_store_hero_bag = GUI:Button_Create(parent, "Button_store_hero_bag", 100, 100, "res/public_win32/1900000612.png")
-- 设置按钮基本属性
GUI:Button_setTitleText(Button_store_hero_bag, "存入英雄背包")
GUI:Button_setTitleColor(Button_store_hero_bag, "#ffffff")
GUI:Button_setTitleFontSize(Button_store_hero_bag, 18)
GUI:Button_titleEnableOutline(Button_store_hero_bag, "#000000", 1)
GUI:setAnchorPoint(Button_store_hero_bag, 0.50, 0.50)
GUI:setTouchEnabled(Button_store_hero_bag, true)
-- 创建光圈效果的函数
local function createGlowEffect(button)
-- 获取按钮位置和大小
local pos = GUI:getPosition(button)
local size = GUI:getContentSize(button)
-- 创建光圈图片（使用一个圆形光晕图片，这里假设使用res/public/light_circle.png）
local glow = GUI:Image_Create(parent, "glow_effect_" .. tostring(button),
pos.x + size.width/2, pos.y + size.height/2,
"res/public/light_circle.png")
GUI:setAnchorPoint(glow, 0.50, 0.50)
GUI:setScale(glow, 0.8) -- 初始缩放
GUI:setOpacity(glow, 0) -- 初始透明
-- 创建光圈动画序列
local actionSequence = GUI:ActionSequence(
GUI:ActionSpawn( -- 同时执行缩放和淡入
GUI:ActionScaleTo(0.2, 1.2),
GUI:ActionFadeTo(0.2, 200) -- 淡入到200透明度
),
GUI:ActionSpawn( -- 放大并淡出
GUI:ActionScaleTo(0.3, 1.5),
GUI:ActionFadeTo(0.3, 0) -- 淡出到0透明度
),
GUI:CallFunc(function()
-- 动画结束后移除光圈
GUI:removeFromParent(glow)
end)
)
-- 运行动画
GUI:runAction(glow, actionSequence)
end
-- 给按钮添加点击事件
GUI:addOnClickEvent(Button_store_hero_bag, function()
-- 播放光圈效果
createGlowEffect(Button_store_hero_bag)
-- 原来的按钮点击逻辑（如果有的话）
SL:print("存入英雄背包按钮被点击！")
-- 这里可以添加你的业务逻辑，比如：
-- if SL:GetMetaValue("USEHERO") then
-- -- 执行存入操作
-- end
end)
```
**代码说明：**
1. **创建光圈节点**：使用`GUI:Image_Create`创建一个圆形光晕图片作为光圈
2. **动画效果**：使用动作序列实现：
- 同时执行缩放和淡入（0.2秒内从0.8缩放到1.2，透明度从0到200）
- 同时执行放大和淡出（0.3秒内从1.2缩放到1.5，透明度从200到0）
- 动画结束后自动移除光圈节点
3. **位置计算**：光圈居中显示在按钮上，使用按钮的中心点坐标
4. **资源说明**：你需要准备一个圆形光晕图片，比如`res/public/light_circle.png`
**注意事项：**
- 如果按钮位置或大小改变，需要重新计算光圈位置
- 可以调整动画时间和缩放值来改变效果强度
- 多次快速点击时可能会创建多个光圈，可以根据需求添加防重复点击逻辑
这个效果会在每次点击按钮时在按钮中心位置产生一个向外扩散的光圈动画，视觉上很有反馈感！
← 返回问答库