local handle
local top_icon_cfg = {
{name="btn_icon_1",idx=1,icon = "100114", wnd = ssrConstCfg.Box996},--996盒子
{name="btn_icon_2",idx=2, icon = "100113", wnd = ssrConstCfg.TradingBank},--交易行
{name="btn_icon_3",idx=3, icon = "100103", wn
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-05-21 16:30:32 |
👁️ 阅读: 6
要实现展开/缩进的洗牌效果，可以在创建图标时添加动画。根据浮生梦老师前端课程内容，可以使用动作序列来实现缩放和移动效果。
```lua
function ssrUIManager:createTopIcon()
local parent = GUI:Win_FindParent(101)
if parent then
GUI:removeAllChildren(parent)
-- 展开/收起按钮
local top_btn = GUI:Button_Create(parent, "btn_switch", 0, -57, "res/official/100079.png")
ssrUIManager.top_btn = top_btn
ssrUIManager.top_layout = parent
-- 添加点击事件
GUI:addOnClickEvent(top_btn, function()
ssrUIManager:setShowCopyBtn(true)
end)
local count = 0
local row = 0
local itemsPerRow = 6
local isExpanded = true -- 初始为展开状态
-- 存储所有创建的按钮，用于动画
local buttonList = {}
for k, val in pairs(top_icon_cfg) do
if val.icon then
-- ... 原有的条件判断代码保持不变 ...
local reminValue = -1
local isCreate = true
local key = val.name
-- ... 原有的各种条件判断 ...
if isCreate then
local col = count % itemsPerRow
row = math.floor(count / itemsPerRow)
-- 计算初始位置（展开状态）
local x = (col * -80) + 770
local y = -80 - (row * 80)
-- 创建按钮
handle = GUI:Button_Create(parent, key, x, y, "res/official/"..val.icon..".png")
GUI:Button_loadTextures(handle, "res/official/"..val.icon..".png")
-- 存储到列表
table.insert(buttonList, {
widget = handle,
targetX = x,
targetY = y,
startX = 0, -- 收起时的位置（屏幕外）
startY = 0
})
-- 添加点击事件
GUI:addOnClickEvent(handle, function()
if SL:HasBuff(1100393) then
return SL:ShowSystemTips("您的角色已被封禁！")
end
ssrUIManager:OPEN(val.wnd)
end)
-- 倒计时文本（如果有）
if reminValue > 0 then
local handle_size = GUI:getContentSize(handle)
local Text_time = GUI:Text_Create(handle, "Text_time", handle_size.width/2, -10, 12, "#00FF00", "")
GUI:setAnchorPoint(Text_time, 0.5, 0.5)
GUI:Text_COUNTDOWN(Text_time, reminValue, function()
ssrUIManager:createTopIcon()
end)
end
count = count + 1
end
end
end
-- 洗牌动画函数
local function playShuffleAnimation(isExpanding)
for i, btnInfo in ipairs(buttonList) do
-- 停止之前的动作
GUI:stopAllActions(btnInfo.widget)
if isExpanding then
-- 展开动画：从中心散开
GUI:setPosition(btnInfo.widget, 0, 0)
GUI:setScale(btnInfo.widget, 0.1)
GUI:setOpacity(btnInfo.widget, 0)
-- 延迟执行，创建洗牌效果
local delay = (i - 1) * 0.05 -- 每个按钮延迟0.05秒
local sequence = GUI:ActionSequence(
GUI:DelayTime(delay),
GUI:ActionSpawn(
GUI:ActionMoveTo(0.3, btnInfo.targetX, btnInfo.targetY),
GUI:ActionScaleTo(0.3, 1),
GUI:ActionFadeTo(0.3, 255)
)
)
GUI:runAction(btnInfo.widget, sequence)
else
-- 收起动画：向中心聚拢
GUI:setOpacity(btnInfo.widget, 255)
-- 延迟执行，创建洗牌效果
local delay = (#buttonList - i) * 0.05 -- 反向延迟
local sequence = GUI:ActionSequence(
GUI:DelayTime(delay),
GUI:ActionSpawn(
GUI:ActionMoveTo(0.3, 0, 0),
GUI:ActionScaleTo(0.3, 0.1),
GUI:ActionFadeTo(0.3, 0)
),
GUI:CallFunc(function()
GUI:setVisible(btnInfo.widget, false)
end)
)
GUI:runAction(btnInfo.widget, sequence)
end
end
end
-- 修改setShowCopyBtn函数
function ssrUIManager:setShowCopyBtn(bool)
local function visible()
GUI:setVisible(ssrUIManager.top_layout, not ssrUIManager.icon_is_show)
end
if bool then
if ssrUIManager.icon_is_show then
-- 收起动画
GUI:Timeline_RotateTo(ssrUIManager.top_btn, 180, 0.1, function()
playShuffleAnimation(false)
visible()
end)
ssrUIManager.icon_is_show = false
else
-- 展开动画
for i, btnInfo in ipairs(buttonList) do
GUI:setVisible(btnInfo.widget, true)
end
playShuffleAnimation(true)
GUI:Timeline_RotateTo(ssrUIManager.top_btn, 0, 0.1, visible)
ssrUIManager.icon_is_show = true
end
else
visible()
end
end
-- 初始展开状态
ssrUIManager.icon_is_show = true
playShuffleAnimation(true)
end
end
```
主要修改内容：
1. **洗牌动画效果**：
- 展开时：图标从中心点(0,0)以缩放0.1和透明度0开始，通过延迟和移动动画散开到目标位置
- 收起时：图标从当前位置通过延迟和移动动画聚拢到中心点，同时缩小和淡出
2. **动画参数说明**：
- `GUI:DelayTime(delay)`：每个按钮的延迟时间，创建依次出现的效果
- `GUI:ActionSpawn()`：同时执行多个动作（移动、缩放、淡入淡出）
- `GUI:ActionMoveTo()`：移动到目标位置
- `GUI:ActionScaleTo()`：缩放到指定大小
- `GUI:ActionFadeTo()`：淡入淡出效果
3. **按钮旋转**：
- 使用`GUI:Timeline_RotateTo()`控制展开/收起按钮的旋转动画
4. **视觉效果**：
- 展开时：图标依次从中心散开，有弹性的洗牌效果
- 收起时：图标依次向中心聚拢，逐渐消失
这样修改后，点击顶部按钮时会有流畅的洗牌展开/收起动画效果，提升了用户体验。
← 返回问答库