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:20:54 |
👁️ 阅读: 9
我来帮你创建一个完整的切换动画效果。根据浮生梦老师前端课程内容，你需要结合淡入淡出和缩放动作来实现这个效果。
```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)
-- 容器宽200，高63
local containerWidth = 200
local containerHeight = 63
-- 计算容器位置（正上方居中）
local posX = k / 2 - containerWidth / 3
local posY = g - 163 -- 屏幕顶部
-- 创建容器（使用Layout_Create作为容器）
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)
-- 初始设置：宽度为0，透明度为0
GUI:setContentSize(container, 0, containerHeight)
GUI:setOpacity(container, 0)
-- 第一步：1秒内同时淡入和拉伸到目标宽度
local fadeInAction = GUI:ActionFadeIn(1) -- 淡入到255
local scaleToAction = GUI:ActionScaleTo(1, 100) -- 缩放比例100%
-- 同时播放淡入和拉伸动作
local spawnAction1 = GUI:ActionSpawn(fadeInAction, scaleToAction)
-- 第二步：1秒后开始收缩和淡出
local delayAction = GUI:DelayTime(1) -- 延迟1秒
local fadeOutAction = GUI:ActionFadeOut(1) -- 淡出到0
local scaleToZeroAction = GUI:ActionScaleTo(1, 0) -- 收缩到0
-- 同时播放淡出和收缩动作
local spawnAction2 = GUI:ActionSpawn(fadeOutAction, scaleToZeroAction)
-- 第三步：淡出完成后隐藏容器
local hideCallback = GUI:CallFunc(function()
GUI:setVisible(container, false)
end)
-- 组合所有动作：拉伸淡入 -> 延迟 -> 收缩淡出 -> 隐藏
local sequenceAction = GUI:ActionSequence(
spawnAction1, -- 1秒：淡入+拉伸
delayAction, -- 1秒：延迟
spawnAction2, -- 1秒：淡出+收缩
hideCallback -- 隐藏容器
)
-- 播放动作
GUI:runAction(container, sequenceAction)
end
```
这个动画效果分为三个阶段：
1. **第一阶段（1秒）**：容器从宽度0、透明度0同时淡入到255并拉伸到完整宽度
2. **第二阶段（1秒延迟）**：保持当前状态
3. **第三阶段（1秒）**：同时淡出到0并收缩到宽度0，最后隐藏容器
注意：由于浮生梦老师前端课程内容中没有直接设置宽度的动作函数，这里使用了`GUI:ActionScaleTo()`来模拟宽度变化。如果你需要精确控制宽度，可能需要使用自定义函数来实现。
← 返回问答库