图片点击给高亮效果
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-04-27 14:06:07 |
👁️ 阅读: 9
在996引擎中，给图片添加点击高亮效果可以通过按钮组件或者给图片添加触摸事件配合动作来实现。这里给你两种实现方案：
## 方案一：使用按钮组件（推荐）
按钮组件自带高亮状态，可以直接设置不同状态的图片。
```lua
-- 创建按钮作为图片使用
local parent = GUI:Win_Create("GMMain", 0, 0, 0, 0, false, false, true, false, false, false, 1)
local button = GUI:Button_Create(parent, "btn_image", 100, 100, "res/public/1900000610.png")
-- 设置高亮状态的图片
GUI:Button_loadTextures(button,
"res/public/1900000610.png", -- 正常状态
"res/public/1900000612.png", -- 按下/高亮状态
"res/public/1900000610.png", -- 禁用状态
0) -- 0表示普通图片加载
-- 添加点击事件
GUI:addOnClickEvent(button, function()
SL:print("图片被点击了！")
end)
```
## 方案二：给图片添加触摸事件+动作效果
如果不想用按钮，可以给图片添加触摸事件，然后通过动作实现高亮效果。
```lua
-- 创建父节点
local parent = GUI:Win_Create("GMMain", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 创建图片
local image = GUI:Image_Create(parent, "my_image", 100, 100, "res/public/1900000610.png")
GUI:setTouchEnabled(image, true) -- 启用触摸
-- 添加触摸事件
GUI:addOnClickEvent(image, function()
SL:print("图片被点击了！")
-- 创建高亮效果：先放大再恢复
local function resetScale()
GUI:runAction(image, GUI:ActionScaleTo(0.1, 1))
end
-- 执行高亮动画
GUI:runAction(image, GUI:ActionSequence(
GUI:ActionScaleTo(0.1, 1.2), -- 放大
GUI:CallFunc(resetScale) -- 恢复
))
end)
```
## 方案三：使用透明度变化实现高亮
```lua
-- 创建父节点
local parent = GUI:Win_Create("GMMain", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 创建图片
local image = GUI:Image_Create(parent, "my_image", 100, 100, "res/public/1900000610.png")
GUI:setTouchEnabled(image, true)
-- 添加点击事件
GUI:addOnClickEvent(image, function()
SL:print("图片被点击了！")
-- 先设置透明度为半透明
GUI:setOpacity(image, 128) -- 128是半透明
-- 延迟后恢复
SL:ScheduleOnce(function()
GUI:setOpacity(image, 255) -- 255是完全不透明
end, 0.2) -- 0.2秒后恢复
end)
```
## 推荐使用方案一的理由：
1. **按钮组件自带状态管理**：正常、按下、禁用状态自动切换
2. **性能更好**：引擎原生支持，不需要额外动作
3. **代码简洁**：只需要设置不同状态的图片路径
如果你需要更复杂的高亮效果（比如颜色变化、发光等），可以结合使用动作序列和回调函数来实现。记得浮生梦老师说过：UI交互效果要自然流畅，不要过度设计！
← 返回问答库