function qiehuan(actor)
local k = SL:GetMetaValue("SCREEN_WIDTH")
local g = SL:GetMetaValue("SCREEN_HEIGHT")
-- 创建父节点
local parent = GUI:Win_Create("MapChangeContainer", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 创建容器在屏幕正上方
-- 容器宽200
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-04-15 13:52:01 |
👁️ 阅读: 10
根据你的需求，我来帮你实现这个容器从中心锚点向两边扩展并淡入淡出后隐藏的动画效果。
```lua
function qiehuan(actor)
local k = SL:GetMetaValue("SCREEN_WIDTH")
local g = SL:GetMetaValue("SCREEN_HEIGHT")
-- 创建父节点
local parent = GUI:Win_Create("MapChangeContainer", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 创建容器在屏幕正上方
local containerWidth = 200
local containerHeight = 63
-- 计算容器位置（正上方居中）
local posX = k / 2 - containerWidth / 3
local posY = g - 163
-- 创建容器
local container = GUI:Layout_Create(parent, "top_container", posX, posY, containerWidth, containerHeight, false)
-- 给容器添加背景
local bg = GUI:Image_Create(container, "bg_image", 0, 0, "res/xixi/ditu/3.png")
GUI:setContentSize(bg, containerWidth, containerHeight)
-- 设置容器初始状态
GUI:setContentSize(container, 0, 0) -- 初始宽高为0
GUI:setAnchorPoint(container, 0.5, 0.5) -- 设置锚点为中心
GUI:setOpacity(container, 0) -- 初始完全透明
-- 获取容器当前位置
local pos = GUI:getPosition(container)
local centerX = pos.x + containerWidth / 2
local centerY = pos.y + containerHeight / 2
-- 重新设置容器位置到锚点位置
GUI:setPosition(container, centerX, centerY)
-- 第一步动画：1秒内扩展到原尺寸并淡入
local scaleAction = GUI:ActionScaleTo(1, 1, 1) -- 缩放到原始大小
local fadeInAction = GUI:ActionFadeTo(1, 255) -- 淡入到完全不透明
local spawnAction = GUI:ActionSpawn(scaleAction, fadeInAction) -- 同时执行缩放和淡入
GUI:runAction(container, spawnAction)
-- 延迟1秒后开始淡出
local function fadeOutAndHide()
-- 第二步动画：淡出
local fadeOutAction = GUI:ActionFadeTo(1, 0) -- 淡出到完全透明
local function hideContainer()
GUI:setVisible(container, false) -- 隐藏容器
if not GUI:Win_IsNull(parent) then
GUI:removeFromParent(parent) -- 移除父节点
end
end
-- 淡出后隐藏
local sequence = GUI:ActionSequence(fadeOutAction, GUI:CallFunc(hideContainer))
GUI:runAction(container, sequence)
end
-- 使用SL:ScheduleOnce延迟1秒执行淡出
SL:ScheduleOnce(fadeOutAndHide, 1)
end
```
**代码说明：**
1. **初始状态设置**：
- 设置容器初始宽高为0：`GUI:setContentSize(container, 0, 0)`
- 设置锚点为中心：`GUI:setAnchorPoint(container, 0.5, 0.5)`
- 设置初始透明度为0：`GUI:setOpacity(container, 0)`
2. **位置计算**：
- 获取容器原始位置
- 计算中心点坐标
- 将容器移动到中心点位置
3. **扩展动画**：
- 使用`GUI:ActionScaleTo(1, 1, 1)`在1秒内缩放到原始大小
- 使用`GUI:ActionFadeTo(1, 255)`在1秒内淡入到完全不透明
- 使用`GUI:ActionSpawn()`让缩放和淡入同时执行
4. **淡出和隐藏**：
- 延迟1秒后开始淡出动画
- 使用`GUI:ActionFadeTo(1, 0)`在1秒内淡出
- 淡出完成后隐藏容器并移除父节点
5. **定时器使用**：
- 使用`SL:ScheduleOnce`进行延迟调用，符合浮生梦老师前端课程规范
**注意**：
- 所有动画时间都是1秒，你可以根据需要调整时间参数
- 淡出前有1秒延迟，确保用户能看到扩展完成后的效果
- 最后会完全移除界面，避免内存泄漏
这个效果会先让容器从中心点向四周扩展并淡入，显示1秒后淡出并隐藏，非常适合地图切换提示！
← 返回问答库