如何在屏幕左中做一个属性展示，实时刷新，并且有展开缩回的动画效果
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-04-16 20:13:25 |
👁️ 阅读: 4
我来帮你实现一个屏幕左中的属性展示面板，带实时刷新和展开缩回的动画效果。
```lua
-- 属性面板管理器
PropertyPanel = {}
PropertyPanel._ui = nil
PropertyPanel._parent = nil
PropertyPanel._isExpanded = true -- 初始展开状态
PropertyPanel._refreshTimer = nil -- 刷新定时器
-- 创建属性面板
function PropertyPanel.Create()
-- 创建父节点
PropertyPanel._parent = GUI:Win_Create("PropertyPanel", 50, 200, 300, 400,
false, false, true, false, false, false, 1)
-- 设置面板背景
local bg = GUI:Widget_Create(PropertyPanel._parent, "bg", 0, 0, 300, 400)
GUI:setBackGroundImage(bg, "res/public_win32/1900000610.png", 0)
GUI:setBackGroundColor(bg, "#000000", 150) -- 半透明黑色背景
-- 创建属性列表
local listView = GUI:ListView_Create(PropertyPanel._parent, "ListView_attrs", 10, 40, 280, 350)
PropertyPanel._ui = {
ListView_attrs = listView,
btn_toggle = nil
}
-- 创建展开/收起按钮
PropertyPanel._ui.btn_toggle = GUI:Button_Create(PropertyPanel._parent, "btn_toggle",
250, 5, "res/public_win32/1900000612.png")
GUI:Button_setTitleText(PropertyPanel._ui.btn_toggle, "收起")
-- 添加按钮点击事件
GUI:addOnClickEvent(PropertyPanel._ui.btn_toggle, function()
PropertyPanel.TogglePanel()
end)
-- 初始化属性显示
PropertyPanel.InitAttributes()
-- 启动定时刷新
PropertyPanel.StartRefresh()
end
-- 初始化属性
function PropertyPanel.InitAttributes()
local attrs = {
{ id = 1, name = "生命值", value = "1000/1000" },
{ id = 2, name = "魔法值", value = "500/500" },
{ id = 3, name = "攻击力", value = "150" },
{ id = 4, name = "防御力", value = "80" },
{ id = 5, name = "暴击率", value = "15%" },
}
for _, attr in ipairs(attrs) do
PropertyPanel.CreateAttributeItem(attr)
end
end
-- 创建属性项
function PropertyPanel.CreateAttributeItem(data)
local list = PropertyPanel._ui.ListView_attrs
local item = GUI:Widget_Create(list, "item_" .. data.id, 0, 0, 280, 30)
-- 属性名称
local textName = GUI:Text_Create(item, "Text_name", 10, 5, 14, "#ffffff", data.name)
GUI:Text_setFontName(textName, "fonts/font5.ttf")
-- 属性值
local textValue = GUI:Text_Create(item, "Text_value", 150, 5, 14, "#ffff00", data.value)
GUI:Text_setFontName(textValue, "fonts/font5.ttf")
-- 添加到列表
GUI:ListView_pushBackCustomItem(list, item)
end
-- 切换面板展开/收起
function PropertyPanel.TogglePanel()
PropertyPanel._isExpanded = not PropertyPanel._isExpanded
if PropertyPanel._isExpanded then
-- 展开动画
GUI:Button_setTitleText(PropertyPanel._ui.btn_toggle, "收起")
local action = GUI:ActionSequence(
GUI:ActionMoveTo(0.3, 50, 200),
GUI:ActionScaleTo(0.2, 1, 1)
)
GUI:runAction(PropertyPanel._parent, action)
GUI:setVisible(PropertyPanel._ui.ListView_attrs, true)
else
-- 收起动画
GUI:Button_setTitleText(PropertyPanel._ui.btn_toggle, "展开")
local action = GUI:ActionSequence(
GUI:ActionScaleTo(0.2, 0, 1),
GUI:ActionMoveTo(0.3, -250, 200)
)
GUI:runAction(PropertyPanel._parent, action)
GUI:setVisible(PropertyPanel._ui.ListView_attrs, false)
end
end
-- 刷新属性值
function PropertyPanel.RefreshAttributes()
-- 获取实时属性值（这里用示例数据，实际需要从服务端获取）
local currentHP = SL:GetMetaValue("T.M.HP") or 1000
local maxHP = SL:GetMetaValue("T.M.MAXHP") or 1000
local currentMP = SL:GetMetaValue("T.M.MP") or 500
local maxMP = SL:GetMetaValue("T.M.MAXMP") or 500
-- 更新属性显示
local list = PropertyPanel._ui.ListView_attrs
local item1 = GUI:getChildByTag(list, 1) -- 生命值
if not GUI:Win_IsNull(item1) then
local ui = GUI:ui_delegate(item1)
local valueStr = string.format("%s/%s", SL:HPUnit(currentHP), SL:HPUnit(maxHP))
GUI:Text_setString(ui.Text_value, valueStr)
end
local item2 = GUI:getChildByTag(list, 2) -- 魔法值
if not GUI:Win_IsNull(item2) then
local ui = GUI:ui_delegate(item2)
local valueStr = string.format("%s/%s", SL:HPUnit(currentMP), SL:HPUnit(maxMP))
GUI:Text_setString(ui.Text_value, valueStr)
end
end
-- 启动定时刷新
function PropertyPanel.StartRefresh()
-- 每0.5秒刷新一次
PropertyPanel._refreshTimer = SL:Schedule(function()
PropertyPanel.RefreshAttributes()
end, 0.5)
end
-- 停止刷新
function PropertyPanel.StopRefresh()
if PropertyPanel._refreshTimer then
SL:Unschedule(PropertyPanel._refreshTimer)
PropertyPanel._refreshTimer = nil
end
end
-- 关闭面板
function PropertyPanel.Close()
PropertyPanel.StopRefresh()
if not GUI:Win_IsNull(PropertyPanel._parent) then
GUI:removeFromParent(PropertyPanel._parent)
end
PropertyPanel._ui = nil
PropertyPanel._parent = nil
end
-- 使用示例
-- 创建面板
PropertyPanel.Create()
-- 需要关闭时调用
-- PropertyPanel.Close()
```
**功能说明：**
1. **位置**：面板在屏幕左中位置（坐标50,200）
2. **实时刷新**：每0.5秒自动刷新属性值，使用`SL:Schedule`定时器
3. **动画效果**：
- 展开：面板从左侧滑入并恢复大小
- 收起：面板缩小并向左侧滑出
- 使用`GUI:ActionSequence`组合动画
4. **属性显示**：
- 显示生命值、魔法值等基础属性
- 使用`SL:HPUnit`格式化数值显示
- 通过`SL:GetMetaValue`获取服务端数据
**使用建议：**
- 可以根据需要调整面板位置和大小
- 可以添加更多属性项
- 动画时间可以调整（0.3秒表示0.3秒完成动画）
- 记得在不需要时调用`PropertyPanel.Close()`释放资源
这个实现参考了浮生梦老师前端课程中属性面板的设计模式，结合了动画效果和实时刷新机制。
← 返回问答库