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,
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-04-21 17:17:55 |
👁️ 阅读: 24
根据浮生梦老师前端课程内容，我来帮你创建一个跑马灯样式的转盘。这里会用到你提供的背景图片，并实现类似跑马灯的效果。
```lua
local function createHorseRaceLamp()
local screenWidth = SL:GetMetaValue("SCREEN_WIDTH", 0)
local screenHeight = SL:GetMetaValue("SCREEN_HEIGHT", 0)
-- 创建父节点
local parent = GUI:Win_Create("HorseRaceLamp", 0, 0, 0, 0, false, false, true, false, false, false, 1)
GUI:Win_SetMainHide(parent, true)
-- 设置背景图片
local bg = GUI:Image_Create(parent, "bg", screenWidth/2, screenHeight/2, "res/public/1900000678_1.png")
GUI:setAnchorPoint(bg, 0.5, 0.5)
-- 创建跑马灯容器
local lampContainer = GUI:Widget_Create(parent, "lampContainer", 0, screenHeight - 50, screenWidth, 40)
GUI:setOpacity(lampContainer, 200)
-- 跑马灯文字
local lampText = GUI:Text_Create(lampContainer, "lampText", 0, 0, 20, "#ffffff", "恭喜玩家获得大奖！")
GUI:Text_setFontName(lampText, "fonts/font5.ttf")
-- 创建转盘区域
local turntableArea = GUI:Widget_Create(parent, "turntableArea", screenWidth/2, screenHeight/2, 400, 400)
GUI:setAnchorPoint(turntableArea, 0.5, 0.5)
-- 转盘背景
local turntableBg = GUI:Image_Create(turntableArea, "turntableBg", 0, 0, "res/public/1900000678_1.png")
GUI:setAnchorPoint(turntableBg, 0.5, 0.5)
GUI:setContentSize(turntableBg, 400, 400)
-- 创建转盘指针
local pointer = GUI:Image_Create(turntableArea, "pointer", 0, 0, "res/01/010006.png")
GUI:setAnchorPoint(pointer, 0.5, 0.9)
GUI:setContentSize(pointer, 50, 200)
-- 创建开始按钮
local startBtn = GUI:Button_Create(turntableArea, "startBtn", 0, -150, "res/01/010006.png")
GUI:setAnchorPoint(startBtn, 0.5, 0.5)
GUI:Button_setTitleText(startBtn, "开始转盘")
GUI:Button_setTitleFontSize(startBtn, 16)
-- 跑马灯动画
local function startLampAnimation()
local textWidth = 300 -- 假设文字宽度
local duration = 10 -- 动画时长
-- 创建动作序列：从右到左移动
local moveAction = GUI:ActionSequence(
GUI:ActionMoveTo(duration, -textWidth, 0),
GUI:ActionMoveTo(0, screenWidth, 0),
GUI:CallFunc(startLampAnimation) -- 循环播放
)
GUI:runAction(lampText, moveAction)
end
-- 转盘旋转动画
local function startTurntableRotation()
local rotationCount = 5 -- 旋转圈数
local duration = 3 -- 旋转时间
-- 创建旋转动作
local rotateAction = GUI:ActionSequence(
GUI:ActionRotateBy(duration, 360 * rotationCount),
GUI:CallFunc(function()
SL:print("转盘旋转完成！")
end)
)
GUI:runAction(turntableBg, rotateAction)
end
-- 按钮点击事件
GUI:addOnClickEvent(startBtn, function()
SL:print("开始转盘")
startTurntableRotation()
end)
-- 开始跑马灯动画
startLampAnimation()
-- 显示界面
GUI:Win_SetMainHide(parent, false)
end
-- 调用函数创建界面
createHorseRaceLamp()
```
这个脚本实现了以下功能：
1. **跑马灯效果**：文字从右向左循环滚动，类似跑马灯
2. **转盘系统**：使用你提供的背景图片作为转盘
3. **旋转动画**：点击按钮后转盘会旋转多圈
4. **界面布局**：跑马灯在上方，转盘在中间，按钮在下方
**主要函数说明**：
- `GUI:ActionMoveTo(duration, x, y)`：移动到指定位置的动作
- `GUI:ActionRotateBy(duration, angle)`：旋转指定角度的动作
- `GUI:ActionSequence(...)`：将多个动作按顺序播放
- `GUI:CallFunc(callback)`：执行回调函数
**注意事项**：
1. 跑马灯文字会根据屏幕宽度自动循环
2. 转盘旋转使用了5圈的效果，你可以调整`rotationCount`参数
3. 所有动画都使用了动作序列，确保执行顺序
如果你需要调整动画速度、位置或添加更多效果，可以修改对应的参数。有什么不明白的地方可以随时问我！
← 返回问答库