动画

如何用 TweenService 给 Roblox GUI 加动画

静态的 GUI 显得扁平。TweenService 会在时间推移中插值 Position、Size、透明度等属性,所以菜单能滑入、按钮能弹出、通知能淡入。本指南讲解几乎所有 Roblox UI 动画背后的三种模式。

1. 让面板滑入到位

先把面板放在屏外,再把它的 Position 补间到最终位置。TweenInfo 控制时长和缓动。

local TweenService = game:GetService("TweenService")
panel.Position = UDim2.fromScale(0.5, -0.5) -- start above the screen

local info = TweenInfo.new(0.4, Enum.EasingStyle.Back, Enum.EasingDirection.Out)
TweenService:Create(panel, info, { Position = UDim2.fromScale(0.5, 0.5) }):Play()

2. 用 Size 淡入弹出

把 Size 从小补间到满,BackgroundTransparency 从 1 补间到 0,就是弹入效果。多个属性可以放在同一个补间里。

panel.Size = UDim2.fromScale(0.2, 0.2)
panel.BackgroundTransparency = 1
TweenService:Create(panel, TweenInfo.new(0.3), {
	Size = UDim2.fromScale(0.4, 0.6),
	BackgroundTransparency = 0,
}):Play()

3. 用 Completed 串联动画

连接到一个补间的 Completed 信号来启动下一个 —— 适合做“先入场再揭示”。

local slide = TweenService:Create(panel, TweenInfo.new(0.4), { Position = UDim2.fromScale(0.5, 0.5) })
slide.Completed:Connect(function()
	TweenService:Create(panel, TweenInfo.new(0.2), { BackgroundTransparency = 0 }):Play()
end)
slide:Play()

提示: EasingStyle 很影响观感:Back 会过冲(俏皮)、Quad 平滑、Elastic 弹跳。按情绪选,别随便挑。

常见问题

能给 TextColor3 或颜色做补间吗?

能 —— TweenService 给 TextColor3、BackgroundColor3 等 Color3 属性做动画的方式和给 Position 做的一样。

怎么让动画永远循环?

在 TweenInfo 里设 Reverses = true 和 RepeatCount = -1,补间就会来回不停地跑。