local function zhuanpan(msgID, msgData)
local screenWidth = SL:GetMetaValue("SCREEN_WIDTH", 0)
local screenHeight = SL:GetMetaValue("SCREEN_HEIGHT", 0)
local parent = GUI:Win_Create("zhuanpan", 0, 0, 0, 0, false, false, true, fa
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-04-21 19:48:55 |
👁️ 阅读: 5
要实现点击按钮后链式转盘效果，我们可以参考浮生梦老师前端课程中的转盘案例。你的代码已经创建了10个物品展示框，我们需要添加按钮点击事件，实现类似转盘的选中效果。
```lua
local function zhuanpan(msgID, msgData)
local screenWidth = SL:GetMetaValue("SCREEN_WIDTH", 0)
local screenHeight = SL:GetMetaValue("SCREEN_HEIGHT", 0)
local parent = GUI:Win_Create("zhuanpan", 0, 0, 0, 0, false, false, true, false, false, false, 1)
GUI:Win_SetMainHide(parent, true)
-- 第一个序列帧
local fullScreenAnim = GUI:Frames_Create(
parent,
"FullScreenFrames",
screenWidth/2,
screenHeight/2,
"res/yuding/donghua/a/a",
".png",
1,
15,
{speed = 100, count = 15, loop = 1}
)
GUI:setAnchorPoint(fullScreenAnim, 0.5, 0.5)
GUI:setContentSize(fullScreenAnim, screenWidth, screenHeight)
GUI:setIgnoreContentAdaptWithSize(fullScreenAnim, false)
-- 第一个序列帧播放完成后的处理
SL:ScheduleOnce(function()
if not GUI:Win_IsNull(fullScreenAnim) then
GUI:removeFromParent(fullScreenAnim)
end
-- 创建第二个序列帧
local secondAnim = GUI:Frames_Create(
parent,
"SecondFrames",
screenWidth/2,
screenHeight/2,
"res/yuding/donghua/b/b",
".png",
1,
15,
{speed = 100, count = 15, loop = -1}
)
GUI:setAnchorPoint(secondAnim, 0.5, 0.5)
GUI:setContentSize(secondAnim, screenWidth, screenHeight)
GUI:setIgnoreContentAdaptWithSize(secondAnim, false)
-- 创建第三个序列帧（初始透明）
local disan = GUI:Frames_Create(
parent,
"threeFrames",
screenWidth/2,
screenHeight/2,
"res/yuding/donghua/d/d",
".png",
1,
25,
{speed = 50, count = 25, loop = -1}
)
local disanPos = GUI:getContentSize(disan)
local beimian = GUI:Button_Create(disan, "bt1", disanPos.width/2-70, disanPos.height/2-300, "res/yuding/donghua/2.png")
local setData = {
[1] = {index = 10174, look = true, bgVisible = false, count = 1, color = 225},
[2] = {index = 10174, look = true, bgVisible = false, count = 1, color = 225},
[3] = {index = 10174, look = true, bgVisible = false, count = 1, color = 225},
[4] = {index = 10174, look = true, bgVisible = false, count = 1, color = 225},
[5] = {index = 10174, look = true, bgVisible = false, count = 1, color = 225},
[6] = {index = 10174, look = true, bgVisible = false, count = 1, color = 225},
[7] = {index = 10174, look = true, bgVisible = false, count = 1, color = 225},
[8] = {index = 10174, look = true, bgVisible = false, count = 1, color = 225},
[9] = {index = 10174, look = true, bgVisible = false, count = 1, color = 225},
[10] = {index = 10174, look = true, bgVisible = false, count = 1, color = 225},
}
local itemshow = {}
itemshow[1] = GUI:ItemShow_Create(disan, 'itemshow1', disanPos.width/2-194, disanPos.height/2+76, setData[1])
itemshow[2] = GUI:ItemShow_Create(disan, 'itemshow2', disanPos.width/2-84, disanPos.height/2+76, setData[2])
itemshow[3] = GUI:ItemShow_Create(disan, 'itemshow3', disanPos.width/2+26, disanPos.height/2+76, setData[3])
itemshow[4] = GUI:ItemShow_Create(disan, 'itemshow4', disanPos.width/2+136, disanPos.height/2+76, setData[4])
itemshow[5] = GUI:ItemShow_Create(disan, 'itemshow5', disanPos.width/2+136, disanPos.height/2-24, setData[5])
itemshow[6] = GUI:ItemShow_Create(disan, 'itemshow6', disanPos.width/2+136, disanPos.height/2-124, setData[6])
itemshow[7] = GUI:ItemShow_Create(disan, 'itemshow7', disanPos.width/2+26, disanPos.height/2-124, setData[7])
itemshow[8] = GUI:ItemShow_Create(disan, 'itemshow8', disanPos.width/2-84, disanPos.height/2-124, setData[8])
itemshow[9] = GUI:ItemShow_Create(disan, 'itemshow9', disanPos.width/2-194, disanPos.height/2-124, setData[9])
itemshow[10] = GUI:ItemShow_Create(disan, 'itemshow10', disanPos.width/2-194, disanPos.height/2-24, setData[10])
-- 为每个物品框添加特效
local effects = {}
for i = 1, 10 do
effects[i] = GUI:Effect_Create(itemshow[i], 'itemshow'..i, -20, 82, 0, 20212, 0, 0, 0, 1)
GUI:setVisible(effects[i], false) -- 初始隐藏特效
end
-- 当前选中的索引
local currentIndex = 1
local isAnimating = false
-- 按钮点击事件 - 实现链式转盘效果
GUI:addOnClickEvent(beimian, function()
if isAnimating then return end -- 防止重复点击
isAnimating = true
-- 先移除按钮
GUI:removeFromParent(beimian)
-- 链式转盘动画
local function playChainAnimation(index)
if index > 10 then
isAnimating = false
return
end
-- 显示当前特效
if index <= 10 then
GUI:setVisible(effects[index], true)
-- 添加缩放动画效果
GUI:runAction(itemshow[index], GUI:ActionSequence(
GUI:ActionScaleTo(0.1, 1.2),
GUI:ActionScaleTo(0.1, 1.0)
))
end
-- 延迟后隐藏当前特效并播放下一个
SL:ScheduleOnce(function()
if index <= 10 then
GUI:setVisible(effects[index], false)
end
-- 播放下一个
playChainAnimation(index + 1)
end, 0.15) -- 每个特效显示0.15秒
end
-- 开始链式动画
playChainAnimation(1)
end)
GUI:setAnchorPoint(disan, 0.5, 0.5)
GUI:setIgnoreContentAdaptWithSize(disan, false)
GUI:setChildrenCascadeOpacityEnabled(disan, true)
GUI:setOpacity(disan, 0) -- 初始完全透明
-- 2秒后淡入第三个序列帧，并在淡入完成后执行回调
SL:ScheduleOnce(function()
if not GUI:Win_IsNull(disan) then
-- 使用动作序列实现淡入效果
GUI:runAction(disan, GUI:ActionSequence(
GUI:ActionFadeTo(0.5, 255), -- 注意：这里应该是ActionFadeTo而不是ActionFadeIn
GUI:CallFunc(function()
SL:Print("转盘界面已淡入完成")
end)
))
end
end, 0.1)
end, 1)
end
SL:RegisterNetMsg(1030, zhuanpan)
```
**代码说明：**
1. **特效创建**：为每个`itemshow`创建了特效框，使用`GUI:Effect_Create()`函数，位置在物品框上方
2. **链式动画**：点击按钮后，特效会按照1-10的顺序依次显示和隐藏，形成链式效果
3. **防重复点击**：使用`isAnimating`变量防止动画播放期间重复点击
4. **动画效果**：每个物品框在显示特效时会有缩放动画，增加视觉反馈
5. **时间控制**：每个特效显示0.15秒，通过`SL:ScheduleOnce`实现延迟播放下一个
**注意**：我修正了一个小错误，`GUI:ActionFadeIn()`应该改为`GUI:ActionFadeTo(time, opacity)`，因为根据浮生梦老师前端课程内容，996引擎使用的是`ActionFadeTo`函数。
这个实现参考了课程中的转盘案例，但根据你的需求调整为链式效果。如果你想要更复杂的转盘逻辑（如随机停止、奖励等），可以参考课程中的完整转盘实现。
要实现点击按钮后链式转盘效果，我们可以参考浮生梦老师前端课程中的转盘案例。你的代码已经创建了10个物品展示框，我们需要添加按钮点击事件，实现类似转盘的选中效果。
```lua
local function zhuanpan(msgID, msgData)
local screenWidth = SL:GetMetaValue("SCREEN_WIDTH", 0)
local screenHeight = SL:GetMetaValue("SCREEN_HEIGHT", 0)
local parent = GUI:Win_Create("zhuanpan", 0, 0, 0, 0, false, false, true, false, false, false, 1)
GUI:Win_SetMainHide(parent, true)
-- 第一个序列帧
local fullScreenAnim = GUI:Frames_Create(
parent,
"FullScreenFrames",
screenWidth/2,
screenHeight/2,
"res/yuding/donghua/a/a",
".png",
1,
15,
{speed = 100, count = 15, loop = 1}
)
GUI:setAnchorPoint(fullScreenAnim, 0.5, 0.5)
GUI:setContentSize(fullScreenAnim, screenWidth, screenHeight)
GUI:setIgnoreContentAdaptWithSize(fullScreenAnim, false)
-- 第一个序列帧播放完成后的处理
SL:ScheduleOnce(function()
if not GUI:Win_IsNull(fullScreenAnim) then
GUI:removeFromParent(fullScreenAnim)
end
-- 创建第二个序列帧
local secondAnim = GUI:Frames_Create(
parent,
"SecondFrames",
screenWidth/2,
screenHeight/2,
"res/yuding/donghua/b/b",
".png",
1,
15,
{speed = 100, count = 15, loop = -1}
)
GUI:setAnchorPoint(secondAnim, 0.5, 0.5)
GUI:setContentSize(secondAnim, screenWidth, screenHeight)
GUI:setIgnoreContentAdaptWithSize(secondAnim, false)
-- 创建第三个序列帧（初始透明）
local disan = GUI:Frames_Create(
parent,
"threeFrames",
screenWidth/2,
screenHeight/2,
"res/yuding/donghua/d/d",
".png",
1,
25,
{speed = 50, count = 25, loop = -1}
)
local disanPos = GUI:getContentSize(disan)
local beimian = GUI:Button_Create(disan, "bt1", disanPos.width/2-70, disanPos.height/2-300, "res/yuding/donghua/2.png")
local setData = {
[1] = {index = 10174, look = true, bgVisible = false, count = 1, color = 225},
[2] = {index = 10174, look = true, bgVisible = false, count = 1, color = 225},
[3] = {index = 10174, look = true, bgVisible = false, count = 1, color = 225},
[4] = {index = 10174, look = true, bgVisible = false, count = 1, color = 225},
[5] = {index = 10174, look = true, bgVisible = false, count = 1, color = 225},
[6] = {index = 10174, look = true, bgVisible = false, count = 1, color = 225},
[7] = {index = 10174, look = true, bgVisible = false, count = 1, color = 225},
[8] = {index = 10174, look = true, bgVisible = false, count = 1, color = 225},
[9] = {index = 10174, look = true, bgVisible = false, count = 1, color = 225},
[10] = {index = 10174, look = true, bgVisible = false, count = 1, color = 225},
}
local itemshow = {}
itemshow[1] = GUI:ItemShow_Create(disan, 'itemshow1', disanPos.width/2-194, disanPos.height/2+76, setData[1])
itemshow[2] = GUI:ItemShow_Create(disan, 'itemshow2', disanPos.width/2-84, disanPos.height/2+76, setData[2])
itemshow[3] = GUI:ItemShow_Create(disan, 'itemshow3', disanPos.width/2+26, disanPos.height/2+76, setData[3])
itemshow[4] = GUI:ItemShow_Create(disan, 'itemshow4', disanPos.width/2+136, disanPos.height/2+76, setData[4])
itemshow[5] = GUI:ItemShow_Create(disan, 'itemshow5', disanPos.width/2+136, disanPos.height/2-24, setData[5])
itemshow[6] = GUI:ItemShow_Create(disan, 'itemshow6', disanPos.width/2+136, disanPos.height/2-124, setData[6])
itemshow[7] = GUI:ItemShow_Create(disan, 'itemshow7', disanPos.width/2+26, disanPos.height/2-124, setData[7])
itemshow[8] = GUI:ItemShow_Create(disan, 'itemshow8', disanPos.width/2-84, disanPos.height/2-124, setData[8])
itemshow[9] = GUI:ItemShow_Create(disan, 'itemshow9', disanPos.width/2-194, disanPos.height/2-124, setData[9])
itemshow[10] = GUI:ItemShow_Create(disan, 'itemshow10', disanPos.width/2-194, disanPos.height/2-24, setData[10])
-- 为每个物品框添加特效
local effects = {}
for i = 1, 10 do
effects[i] = GUI:Effect_Create(itemshow[i], 'itemshow'..i, -20, 82, 0, 20212, 0, 0, 0, 1)
GUI:setVisible(effects[i], false) -- 初始隐藏特效
end
-- 当前选中的索引
local currentIndex = 1
local isAnimating = false
-- 按钮点击事件 - 实现链式转盘效果
GUI:addOnClickEvent(beimian, function()
if isAnimating then return end -- 防止重复点击
isAnimating = true
-- 先移除按钮
GUI:removeFromParent(beimian)
-- 链式转盘动画
local function playChainAnimation(index)
if index > 10 then
isAnimating = false
return
end
-- 显示当前特效
if index <= 10 then
GUI:setVisible(effects[index], true)
-- 添加缩放动画效果
GUI:runAction(itemshow[index], GUI:ActionSequence(
GUI:ActionScaleTo(0.1, 1.2),
GUI:ActionScaleTo(0.1, 1.0)
))
end
-- 延迟后隐藏当前特效并播放下一个
SL:ScheduleOnce(function()
if index <= 10 then
GUI:setVisible(effects[index], false)
end
-- 播放下一个
playChainAnimation(index + 1)
end, 0.15) -- 每个特效显示0.15秒
end
-- 开始链式动画
playChainAnimation(1)
end)
GUI:setAnchorPoint(disan, 0.5, 0.5)
GUI:setIgnoreContentAdaptWithSize(disan, false)
GUI:setChildrenCascadeOpacityEnabled(disan, true)
GUI:setOpacity(disan, 0) -- 初始完全透明
-- 2秒后淡入第三个序列帧，并在淡入完成后执行回调
SL:ScheduleOnce(function()
if not GUI:Win_IsNull(disan) then
-- 使用动作序列实现淡入效果
GUI:runAction(disan, GUI:ActionSequence(
GUI:ActionFadeTo(0.5, 255), -- 注意：这里应该是ActionFadeTo而不是ActionFadeIn
GUI:CallFunc(function()
SL:Print("转盘界面已淡入完成")
end)
))
end
end, 0.1)
end, 1)
end
SL:RegisterNetMsg(1030, zhuanpan)
```
**代码说明：**
1. **特效创建**：为每个`itemshow`创建了特效框，使用`GUI:Effect_Create()`函数，位置在物品框上方
2. **链式动画**：点击按钮后，特效会按照1-10的顺序依次显示和隐藏，形成链式效果
3. **防重复点击**：使用`isAnimating`变量防止动画播放期间重复点击
4. **动画效果**：每个物品框在显示特效时会有缩放动画，增加视觉反馈
5. **时间控制**：每个特效显示0.15秒，通过`SL:ScheduleOnce`实现延迟播放下一个
**注意**：我修正了一个小错误，`GUI:ActionFadeIn()`应该改为`GUI:ActionFadeTo(time, opacity)`，因为根据浮生梦老师前端课程内容，996引擎使用的是`ActionFadeTo`函数。
这个实现参考了课程中的转盘案例，但根据你的需求调整为链式效果。如果你想要更复杂的转盘逻辑（如随机停止、奖励等），可以参考课程中的完整转盘实现。
← 返回问答库