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)
-- 创建容器在屏幕正上方
-- 容器宽20
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-04-15 13:05:33 |
👁️ 阅读: 14
我来帮你实现这个容器切换动画效果。根据浮生梦老师前端课程内容，需要结合多个动作来实现你描述的效果：
```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 / 2
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)
-- 1. 初始状态：缩小到0.1倍，位置在目标位置上方50，完全透明
GUI:setScale(container, 0.1) -- 缩小到10%
GUI:setPosition(container, posX, posY - 50) -- 初始位置在目标上方50
GUI:setOpacity(container, 0) -- 完全透明
GUI:setVisible(container, true) -- 设置为可见
-- 2. 创建动画序列
local function animationComplete()
-- 动画完成后隐藏容器
GUI:setVisible(container, false)
-- 从父节点移除（可选）
GUI:removeFromParent(container)
end
-- 动画序列：
-- 1) 同时执行：移动到目标位置 + 放大到原尺寸 + 淡入
-- 2) 延迟0.5秒
-- 3) 淡出
-- 4) 隐藏
GUI:runAction(container,
GUI:ActionSequence(
-- 同时执行三个动作：移动、缩放、淡入
GUI:ActionSpawn(
GUI:ActionMoveTo(0.3, posX, posY), -- 移动到目标位置
GUI:ActionScaleTo(0.3, 1.0), -- 缩放到原尺寸
GUI:ActionFadeIn(0.3) -- 淡入显示
),
-- 等待0.5秒
GUI:DelayTime(0.5),
-- 淡出
GUI:ActionFadeOut(0.3),
-- 动画完成回调
GUI:CallFunc(animationComplete)
)
)
end
```
**代码说明：**
1. **初始状态设置**：
- `GUI:setScale(container, 0.1)` - 将容器缩小到10%
- `GUI:setPosition(container, posX, posY - 50)` - 设置在目标位置上方50像素
- `GUI:setOpacity(container, 0)` - 设置为完全透明
- `GUI:setVisible(container, true)` - 确保容器可见
2. **动画序列**：
- **ActionSpawn**：让多个动作同时执行
- `ActionMoveTo`：0.3秒移动到目标位置
- `ActionScaleTo`：0.3秒放大到原尺寸
- `ActionFadeIn`：0.3秒淡入显示
- **DelayTime**：延迟0.5秒
- **ActionFadeOut**：0.3秒淡出
- **CallFunc**：动画完成后隐藏容器
3. **注意事项**：
- 动画总时长：0.3秒（入场）+ 0.5秒（停留）+ 0.3秒（淡出）= 1.1秒
- 使用`ActionMoveTo`而不是`ActionMoveBy`，因为我们要移动到绝对位置
- 淡出完成后自动隐藏容器并移除
这个动画效果会先让容器从上方缩小透明状态，一边下移一边放大和淡入，停留半秒后淡出消失。如果需要调整动画时间，可以修改各个动作的时间参数。
← 返回问答库