开始的时候 全部图标是会显示的 点击折叠才会有缩放 淡入 淡出动画
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-04-12 15:24:18 |
👁️ 阅读: 7
要实现这个功能，你需要创建一个界面，其中图标默认显示，点击"折叠"按钮后，图标执行缩放、淡出动画并隐藏。再次点击时执行淡入和缩放动画显示图标。
以下是实现代码：
```lua
-- 创建主界面
local parent = GUI:Win_Create("GMMain", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 创建折叠按钮
local foldBtn = GUI:Button_Create(parent, "btn_fold", 100, 100, "res/public/1900000612.png")
GUI:Button_setTitleText(foldBtn, "折叠")
-- 创建图标容器
local iconContainer = GUI:Widget_Create(parent, "icon_container", 200, 200, 300, 300)
-- 创建几个示例图标
local icon1 = GUI:Widget_Create(iconContainer, "icon1", 50, 50, 50, 50)
local icon2 = GUI:Widget_Create(iconContainer, "icon2", 150, 50, 50, 50)
local icon3 = GUI:Widget_Create(iconContainer, "icon3", 50, 150, 50, 50)
local icon4 = GUI:Widget_Create(iconContainer, "icon4", 150, 150, 50, 50)
-- 设置图标背景（使用案例中的图片）
local bgPath = "res/public_win32/1900000610.png"
GUI:Widget_setBackGroundImage(icon1, bgPath)
GUI:Widget_setBackGroundImage(icon2, bgPath)
GUI:Widget_setBackGroundImage(icon3, bgPath)
GUI:Widget_setBackGroundImage(icon4, bgPath)
-- 标记当前是否折叠
local isFolded = false
-- 折叠/展开动画函数
local function toggleIcons()
if isFolded then
-- 展开：淡入 + 缩放动画
for i, icon in ipairs({icon1, icon2, icon3, icon4}) do
-- 先设置透明度为0（完全透明）
GUI:setOpacity(icon, 0)
GUI:setVisible(icon, true)
-- 执行淡入动画
GUI:Timeline_FadeIn(icon, 0.3, nil)
-- 执行缩放动画（从0.5缩放到1）
GUI:Timeline_ScaleTo(icon, 50, 0.3, nil) -- 50% 缩放到正常
GUI:Timeline_ScaleTo(icon, 100, 0.3, nil) -- 100% 正常大小
end
GUI:Button_setTitleText(foldBtn, "折叠")
isFolded = false
else
-- 折叠：淡出 + 缩放动画
for i, icon in ipairs({icon1, icon2, icon3, icon4}) do
-- 执行淡出动画
GUI:Timeline_FadeOut(icon, 0.3, function()
-- 动画完成后隐藏图标
GUI:setVisible(icon, false)
end)
-- 执行缩放动画（从1缩放到0.5）
GUI:Timeline_ScaleTo(icon, 50, 0.3, nil) -- 缩放到50%
end
GUI:Button_setTitleText(foldBtn, "展开")
isFolded = true
end
end
-- 绑定按钮点击事件
GUI:addOnClickEvent(foldBtn, toggleIcons)
-- 初始状态：图标显示
GUI:setVisible(icon1, true)
GUI:setVisible(icon2, true)
GUI:setVisible(icon3, true)
GUI:setVisible(icon4, true)
SL:print("界面创建完成，图标默认显示，点击'折叠'按钮执行动画")
```
**代码说明：**
1. **初始状态**：所有图标默认显示
2. **折叠动画**：点击"折叠"按钮时，图标执行：
- 淡出动画（`GUI:Timeline_FadeOut`）
- 缩放动画（`GUI:Timeline_ScaleTo`缩放到50%）
- 动画完成后隐藏图标
3. **展开动画**：再次点击时，图标执行：
- 先设置透明度为0并显示
- 淡入动画（`GUI:Timeline_FadeIn`）
- 缩放动画（从50%缩放到100%）
4. **按钮文本切换**：根据折叠状态切换按钮文本为"折叠"/"展开"
**关键函数说明：**
- `GUI:Timeline_FadeOut(widget, time, callback)`：淡出动画
- `GUI:Timeline_FadeIn(widget, time, callback)`：淡入动画
- `GUI:Timeline_ScaleTo(widget, value, time, callback)`：缩放到指定比例
- `GUI:setVisible(widget, value)`：设置控件可见性
- `GUI:setOpacity(widget, value)`：设置透明度（0-255）
这样就能实现点击折叠时图标有缩放和淡入淡出的动画效果了！
← 返回问答库