local moshenyuanli = {}
local config = {
[1] = { name = "暴击原力Lv1", level = 1, count = 2, type1 = "物品", name1 = "魔神修炼石", value1 = 10, type2 = "货币", name2 = "金币", value2 = 10000, cur_attr_1 = 1, cur_attr_2 = 1, cur_attr_3 = 1, cur_attr_4 = 30 },
[2] =
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-03-07 14:50:30 |
👁️ 阅读: 7
根据浮生梦老师前端课程内容，要实现你描述的动画效果，需要在点击NPC时触发。这里给你一个完整的实现方案：
```lua
-- 在点击NPC的地方调用这个函数
function moshenyuanli.showSkillAnimation()
if not moshenyuanli.parent or not moshenyuanli.parent._ui then
return
end
local ui = moshenyuanli.parent._ui
-- 获取要动画的控件
local image1 = ui["Image_1"]
local image3 = ui["Image_3"]
local text1 = ui["Text_1"]
local text2 = ui["Text_2"]
local text3 = ui["Text_3"]
local text4 = ui["Text_4"]
-- 检查控件是否存在
if not image1 or GUI:Win_IsNull(image1) then return end
if not image3 or GUI:Win_IsNull(image3) then return end
if not text1 or GUI:Win_IsNull(text1) then return end
if not text2 or GUI:Win_IsNull(text2) then return end
if not text3 or GUI:Win_IsNull(text3) then return end
if not text4 or GUI:Win_IsNull(text4) then return end
-- 1. 先保存原始位置
local originalPositions = {}
local pos1 = GUI:getPosition(image1)
originalPositions.image1 = {x = pos1.x, y = pos1.y}
local pos3 = GUI:getPosition(image3)
originalPositions.image3 = {x = pos3.x, y = pos3.y}
local posText1 = GUI:getPosition(text1)
originalPositions.text1 = {x = posText1.x, y = posText1.y}
local posText2 = GUI:getPosition(text2)
originalPositions.text2 = {x = posText2.x, y = posText2.y}
local posText3 = GUI:getPosition(text3)
originalPositions.text3 = {x = posText3.x, y = posText3.y}
local posText4 = GUI:getPosition(text4)
originalPositions.text4 = {x = posText4.x, y = posText4.y}
-- 2. 设置初始位置（从右侧屏幕外开始）
local screenWidth = 800 -- 假设屏幕宽度为800，根据实际调整
-- Image_1和Image_3一起从右侧进入
GUI:setPosition(image1, screenWidth, originalPositions.image1.y)
GUI:setPosition(image3, screenWidth, originalPositions.image3.y)
-- Text控件设置阶梯式初始位置，每个间隔50像素
GUI:setPosition(text1, screenWidth + 50, originalPositions.text1.y)
GUI:setPosition(text2, screenWidth + 100, originalPositions.text2.y)
GUI:setPosition(text3, screenWidth + 150, originalPositions.text3.y)
GUI:setPosition(text4, screenWidth + 200, originalPositions.text4.y)
-- 3. 执行动画序列
-- Image_1和Image_3的动画（0.5秒回到原位）
GUI:runAction(image1, GUI:ActionMoveTo(0.5, originalPositions.image1.x, originalPositions.image1.y))
GUI:runAction(image3, GUI:ActionMoveTo(0.5, originalPositions.image3.x, originalPositions.image3.y))
-- Text控件的阶梯式动画（每个间隔0.1秒）
GUI:runAction(text1, GUI:ActionSequence(
GUI:DelayTime(0.1),
GUI:ActionMoveTo(0.4, originalPositions.text1.x, originalPositions.text1.y)
))
GUI:runAction(text2, GUI:ActionSequence(
GUI:DelayTime(0.2),
GUI:ActionMoveTo(0.4, originalPositions.text2.x, originalPositions.text2.y)
))
GUI:runAction(text3, GUI:ActionSequence(
GUI:DelayTime(0.3),
GUI:ActionMoveTo(0.4, originalPositions.text3.x, originalPositions.text3.y)
))
GUI:runAction(text4, GUI:ActionSequence(
GUI:DelayTime(0.4),
GUI:ActionMoveTo(0.4, originalPositions.text4.x, originalPositions.text4.y)
))
SL:print("技能信息动画开始播放")
end
-- 在点击NPC的地方调用动画函数
-- 例如，在你的NPC点击事件处理函数中添加：
function onNPCClick()
-- ... 其他NPC处理逻辑 ...
-- 显示魔神原力界面
moshenyuanli.main(param1, param2, param3, param4)
-- 延迟一点时间确保界面加载完成，然后播放动画
SL:ScheduleOnce(function()
moshenyuanli.showSkillAnimation()
end, 0.1) -- 延迟0.1秒确保界面完全加载
end
```
**关键点说明：**
1. **动画原理**：
- 先将所有控件移动到屏幕右侧外部
- 使用`GUI:ActionMoveTo`让它们移动到原始位置
- 通过`GUI:DelayTime`实现阶梯式延迟效果
2. **函数说明**：
- `GUI:getPosition(widget)`：获取控件当前位置
- `GUI:setPosition(widget, x, y)`：设置控件位置
- `GUI:ActionMoveTo(time, x, y)`：移动到指定位置的动画
- `GUI:ActionSequence(...)`：多个动作顺序播放
- `GUI:DelayTime(time)`：动作延迟
- `SL:ScheduleOnce(callback, delay)`：单次定时器
3. **阶梯式效果**：
- Text1延迟0.1秒开始移动
- Text2延迟0.2秒开始移动
- Text3延迟0.3秒开始移动
- Text4延迟0.4秒开始移动
- 每个文本移动时间0.4秒，形成错落有致的效果
4. **注意事项**：
- 需要根据实际屏幕宽度调整`screenWidth`值
- 动画时间参数可以根据需要调整
- 确保在界面完全加载后再调用动画函数
这样就能实现点击NPC时，技能信息从右侧飞入的动画效果了！如果有不清楚的地方，随时问我哦！
← 返回问答库