创作

用户界面动画/动画补间

*此内容使用人工智能（Beta）翻译，可能包含错误。若要查看英文页面，请点按 此处。

在动画中，动画补间是生成序列中两个关键点之间的中间帧的过程。在设计用户界面时，您可以使用动画补间将 GuiObject 从一个状态平滑地过渡到另一个状态，例如：

  • 在用户选择按钮时平滑地增加按钮的大小。
  • UI 菜单从屏幕边缘滑入和滑出。
  • 用户获得生命值提升时，逐渐将生命值条在两个宽度之间动画化。

单属性动画补间

位置

要对 GuiObject 的位置进行动画补间：

  1. 为对象设置 AnchorPoint。
  2. 确定对象目标位置的 UDim2 坐标，使用 UDim2 的比例参数，而不是精确的像素值，以便对象动画补间到屏幕的确切中心。
  3. 将 TweenInfo 和目标位置传递给 TweenService:Create()。
  4. 使用 Tween:Play() 播放动画补间。

以下代码片段将 ImageLabel 移动到 ScreenGui 的屏幕确切中心：

UI Tween - Position
local TweenService = game:GetService("TweenService")

local Players = game:GetService("Players")



local PlayerGui = Players.LocalPlayer:WaitForChild("PlayerGui")

local ScreenGui = PlayerGui:WaitForChild("ScreenGui")

local object = ScreenGui:WaitForChild("ImageLabel")



object.AnchorPoint = Vector2.new(0.5, 0.5)



local targetPosition = UDim2.new(0.5, 0, 0.5, 0)



local tweenInfo = TweenInfo.new(2)

local tween = TweenService:Create(object, tweenInfo, {Position = targetPosition})



tween:Play()

大小

要对 GuiObject 的大小进行动画补间：

  1. 确定对象目标大小的 UDim2 坐标，使用 UDim2 的比例参数，而不是精确的像素值，以便对象动画补间到屏幕大小的相对百分比。
  2. 将 UIAspectRatioConstraint 附加到对象，以在动画补间时保持其设计的宽高比。
  3. 将 TweenInfo 和目标大小传递给 TweenService:Create()。
  4. 使用 Tween:Play() 播放动画补间。

以下代码片段将 ImageLabel 在 ScreenGui 内缩放到屏幕宽度或高度的 40%（较小者），以对象的中心锚点为中心：

UI Tween - Size
local TweenService = game:GetService("TweenService")

local Players = game:GetService("Players")



local PlayerGui = Players.LocalPlayer:WaitForChild("PlayerGui")

local ScreenGui = PlayerGui:WaitForChild("ScreenGui")

local object = ScreenGui:WaitForChild("ImageLabel")



object.AnchorPoint = Vector2.new(0.5, 0.5)



local aspectRatioConstraint = Instance.new("UIAspectRatioConstraint")

aspectRatioConstraint.Parent = object



local targetSize = UDim2.new(0.4, 0, 0.4, 0)



local tweenInfo = TweenInfo.new(2)

local tween = TweenService:Create(object, tweenInfo, {Size = targetSize})



tween:Play()

旋转

要对 GuiObject 的旋转进行动画补间：

  1. 设置对象的 AnchorPoint 以便围绕其旋转。
  2. 确定对象的目标 Rotation。
  3. 将 TweenInfo 和目标旋转传递给 TweenService:Create()。
  4. 使用 Tween:Play() 播放动画补间。
UI Tween - Size
local TweenService = game:GetService("TweenService")

local Players = game:GetService("Players")



local PlayerGui = Players.LocalPlayer:WaitForChild("PlayerGui")

local ScreenGui = PlayerGui:WaitForChild("ScreenGui")

local object = ScreenGui:WaitForChild("ImageLabel")



object.AnchorPoint = Vector2.new(0.5, 0.5)



local targetRotation = 45



local tweenInfo = TweenInfo.new(2)

local tween = TweenService:Create(object, tweenInfo, {Rotation = targetRotation})



tween:Play()

透明度

多个属性控制 UI 透明度，具体取决于对象类型。您可以单独对这些属性进行动画补间，或者通过 多属性动画补间 组合。此外，您可以通过将对象放入 CanvasGroup 中并对该组的 GroupTransparency 进行动画补间来逐渐改变对象的整体透明度。

UI 对象属性
FrameBackgroundTransparency
TextLabelBackgroundTransparency, TextTransparency, TextStrokeTransparency
TextButtonBackgroundTransparency, TextTransparency, TextStrokeTransparency
ImageLabelBackgroundTransparency, ImageTransparency
ImageButtonBackgroundTransparency, ImageTransparency
UI Tween - Image Transparency
local TweenService = game:GetService("TweenService")

local Players = game:GetService("Players")



local PlayerGui = Players.LocalPlayer:WaitForChild("PlayerGui")

local ScreenGui = PlayerGui:WaitForChild("ScreenGui")

local object = ScreenGui:WaitForChild("ImageLabel")



local targetTransparency = 0.8



local tweenInfo = TweenInfo.new(2)

local tween = TweenService:Create(object, tweenInfo, {ImageTransparency = targetTransparency})



tween:Play()
UI Tween - Canvas Group Transparency
local TweenService = game:GetService("TweenService")

local Players = game:GetService("Players")



local PlayerGui = Players.LocalPlayer:WaitForChild("PlayerGui")

local ScreenGui = PlayerGui:WaitForChild("ScreenGui")

local canvasGroup = ScreenGui:WaitForChild("CanvasGroup")



local targetTransparency = 0.8



local tweenInfo = TweenInfo.new(2)

local tween = TweenService:Create(canvasGroup, tweenInfo, {GroupTransparency = targetTransparency})



tween:Play()

颜色

多个属性控制 UI 颜色，具体取决于对象类型。您可以单独对这些属性进行动画补间，或者通过 多属性动画补间 组合。此外，您可以通过将对象放入 CanvasGroup 中并对该组的 GroupColor3 进行动画补间来逐渐改变对象的整体颜色。

UI 对象属性
FrameBackgroundColor3, BorderColor3
TextLabelBackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
TextButtonBackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
ImageLabelBackgroundColor3, BorderColor3, ImageColor3
ImageButtonBackgroundColor3, BorderColor3, ImageColor3
UI Tween - Image Color
local TweenService = game:GetService("TweenService")

local Players = game:GetService("Players")



local PlayerGui = Players.LocalPlayer:WaitForChild("PlayerGui")

local ScreenGui = PlayerGui:WaitForChild("ScreenGui")

local object = ScreenGui:WaitForChild("ImageLabel")



local targetColor = Color3.fromRGB(255, 0, 0)



local tweenInfo = TweenInfo.new(2)

local tween = TweenService:Create(object, tweenInfo, {ImageColor3 = targetColor})



tween:Play()
UI Tween - Canvas Group Color
local TweenService = game:GetService("TweenService")

local Players = game:GetService("Players")



local PlayerGui = Players.LocalPlayer:WaitForChild("PlayerGui")

local ScreenGui = PlayerGui:WaitForChild("ScreenGui")

local canvasGroup = ScreenGui:WaitForChild("CanvasGroup")



local targetColor = Color3.fromRGB(255, 0, 0)



local tweenInfo = TweenInfo.new(2)

local tween = TweenService:Create(canvasGroup, tweenInfo, {GroupColor3 = targetColor})



tween:Play()

描边

多个属性控制 UI 边框，具体取决于对象类型。

UI 对象属性
FrameBorderSizePixel, BorderColor3
TextLabelBorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
TextButtonBorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
ImageLabelBorderSizePixel, BorderColor3
ImageButtonBorderSizePixel, BorderColor3

Alternatively, you can apply a UIStroke child and tween its thickness, color, and/or transparency.

UI 对象属性
UIStrokeColor, Thickness, Transparency
UI Tween - UIStroke Color & Thickness
local TweenService = game:GetService("TweenService")

local Players = game:GetService("Players")



local PlayerGui = Players.LocalPlayer:WaitForChild("PlayerGui")

local ScreenGui = PlayerGui:WaitForChild("ScreenGui")

local object = ScreenGui:WaitForChild("TextLabel")



local stroke = Instance.new("UIStroke")

stroke.Color = Color3.fromRGB(255, 255, 255)

stroke.Thickness = 5

stroke.Parent = object



local targetColor = Color3.fromRGB(255, 0, 0)

local targetThickness = 10



local tweenInfo = TweenInfo.new(2)

local tween = TweenService:Create(stroke, tweenInfo, {Color = targetColor, Thickness = targetThickness})



tween:Play()

多属性动画补间

您可以将任何的 单属性动画补间 组合成更复杂的动画补间，通过将多个目标属性传递给 TweenService:Create()，例如 位置 + 旋转 或 大小 + 透明度。

UI Tween - Position & Rotation
local TweenService = game:GetService("TweenService")

local Players = game:GetService("Players")



local PlayerGui = Players.LocalPlayer:WaitForChild("PlayerGui")

local ScreenGui = PlayerGui:WaitForChild("ScreenGui")

local object = ScreenGui:WaitForChild("ImageLabel")



object.AnchorPoint = Vector2.new(0.5, 0.5)



local targetPosition = UDim2.new(0.5, 0, 0.5, 0)

local targetRotation = 45



local tweenInfo = TweenInfo.new(2)

local tween = TweenService:Create(object, tweenInfo, {Position = targetPosition, Rotation = targetRotation})



tween:Play()
UI Tween - Size & Transparency
local TweenService = game:GetService("TweenService")

local Players = game:GetService("Players")



local PlayerGui = Players.LocalPlayer:WaitForChild("PlayerGui")

local ScreenGui = PlayerGui:WaitForChild("ScreenGui")

local object = ScreenGui:WaitForChild("ImageLabel")



object.AnchorPoint = Vector2.new(0.5, 0.5)



local aspectRatioConstraint = Instance.new("UIAspectRatioConstraint")

aspectRatioConstraint.Parent = object



local targetSize = UDim2.new(0.4, 0, 0.4, 0)

local targetTransparency = 0.8



local tweenInfo = TweenInfo.new(2)

local tween = TweenService:Create(object, tweenInfo, {Size = targetSize, ImageTransparency = targetTransparency})



tween:Play()

动画补间序列

您可以通过在前一个动画补间的 Completed 事件后播放后续动画补间来链接 UI 动画。以下示例脚本将对象移动到屏幕中心，然后旋转 45°。

UI Tween Sequence
local TweenService = game:GetService("TweenService")

local Players = game:GetService("Players")



local PlayerGui = Players.LocalPlayer:WaitForChild("PlayerGui")

local ScreenGui = PlayerGui:WaitForChild("ScreenGui")

local object = ScreenGui:WaitForChild("ImageLabel")



object.AnchorPoint = Vector2.new(0.5, 0.5)



local targetPosition = UDim2.new(0.5, 0, 0.5, 0)

local targetRotation = 45



local tweenInfo = TweenInfo.new(2)

local positionTween = TweenService:Create(object, tweenInfo, {Position = targetPosition})

local rotationTween = TweenService:Create(object, tweenInfo, {Rotation = targetRotation})



-- 初始播放位置动画补间

positionTween:Play()



-- 在位置动画补间完成后播放旋转动画补间

positionTween.Completed:Connect(function()

	rotationTween:Play()

end)

样式过渡

UI 对象也可以通过 样式过渡 动画化，这与 CSS 过渡 类似，其中一个或多个 UI 属性通过 StyleRule 定义进行动画补间。有关详细信息，请参阅 样式编辑器 指南。

样式编辑器中的最终样式状态规则。

缓动选项

通过使用 TweenInfo 的缓动选项，您可以控制 UI 动画的缓动 样式 和 方向。

样式

Enum.EasingStyle 设置从开始到结束的插值速率。默认情况下，缓动样式设置为 Enum.EasingStyle.Quad。

样式描述
线性以恒定速度移动。
正弦速度由正弦波决定，以实现平稳的缓动效果。
二次类似于 正弦，但基于二次插值有稍微陡峭的曲线。
立方类似于 二次，但基于立方插值有稍微陡峭的曲线。
四次类似于 立方，但基于四次插值有更陡峭的曲线。
五次类似于 四次，但基于五次插值有更陡峭的曲线。
指数基于指数插值的最陡曲线。
圆形沿着圆弧运动，加速度更突然，减速更平缓，与 五次 或 指数 相比。
回弹略微超出目标，然后再回到位置。
反弹在达到目标后多次向后反弹，然后最终稳定。
弹性像附着在橡皮筋上一样移动，超出目标几次。
带有 'In' 缓动方向的缓动样式变化的图形. 
Easing Style - Cubic
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic)

local tween = TweenService:Create(object, tweenInfo, {Rotation = 45})

方向

Enum.EasingDirection 定义 缓动样式 插值如何应用于对象，默认值为 Out。请注意，线性缓动样式的动画补间不受影响，因为线性插值在开始到结束之间是恒定的。

方向描述
In缓动样式向前应用。
Out缓动样式反向应用。
InOut缓动样式在前半部分向前应用，在后半部分反向应用。
Easing direction - InOut
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic, Enum.EasingDirection.InOut)

local tween = TweenService:Create(object, tweenInfo, {Rotation = 45})

打字机效果在文本上

您可以轻松增强基于文本的用户界面，例如过场动画横幅、玩家指令和提示，通过动画效果。 "打字机" 效果非常适合 TextLabels ，它们讲述故事、输出 NPC 对话等。

  1. 在 ReplicatedStorage 中创建一个新的 ModuleScript。

  2. 将新脚本重命名为 AnimateUI。

  3. 将以下代码粘贴到脚本中：

    ModuleScript - AnimateUI
    local LocalizationService = game:GetService("LocalizationService")

    local Players = game:GetService("Players")

    

    local SOURCE_LOCALE = "en"

    local translator = nil

    

    local AnimateUI = {}

    

    function AnimateUI.loadTranslator()

    	pcall(function()

    		translator = LocalizationService:GetTranslatorForPlayerAsync(Players.LocalPlayer)

    	end)

    	if not translator then

    		pcall(function()

    			translator = LocalizationService:GetTranslatorForLocaleAsync(SOURCE_LOCALE)

    		end)

    	end

    end

    

    function AnimateUI.typeWrite(guiObject, text, delayBetweenChars)

    	guiObject.Visible = true

    	guiObject.AutoLocalize = false

    	local displayText = text

    

    	-- 尝试翻译文本

    	if translator then

    		displayText = translator:Translate(guiObject, text)

    	end

    

    	-- 替换换行符标签，以便图形循环不会错过这些字符

    	displayText = displayText:gsub("<br%s*/>", "\n")

     	-- 移除 RichText 标签，因为逐字符动画会破坏这些标签

    	displayText = displayText:gsub("<[^<>]->", "")

    

    	-- 将翻译/修改后的文本设置为父级文本

    	guiObject.Text = displayText

    

    	local index = 0

    	for first, last in utf8.graphemes(displayText) do

    		index += 1

    		guiObject.MaxVisibleGraphemes = index

    		task.wait(delayBetweenChars)

    	end

    end

    

    return AnimateUI

  4. 在合适的位置（例如在 ScreenGui 中）创建一个 TextLabel，并将其作为 StarterGui 的子级。

  5. 插入一个新的 LocalScript，作为标签的直接子级，并粘贴以下代码。请注意，每条消息都是通过调用 AnimateUI.typeWrite() 输出的，参数为父对象、要输出的字符串和字符之间的延迟。

    LocalScript
    local ReplicatedStorage = game:GetService("ReplicatedStorage")

    

    local AnimateUI = require(ReplicatedStorage:WaitForChild("AnimateUI"))

    

    local label = script.Parent

    

    -- 如果体验已本地化，则加载翻译器

    --AnimateUI.loadTranslator()

    

    local message1 = [[在这扇门后是<br /><font size="46" color="rgb(255,50,25)">伟大的佐戈斯...</font> <font size="40">🗡</font>]]

    AnimateUI.typeWrite(label, message1, 0.05)

    

    task.wait(1)

    

    local message2 = [[...统治这个地牢 <font color="rgb(255,200,50)">无人挑战！</font> <font size="30">😈</font>]]

    AnimateUI.typeWrite(label, message2, 0.05)
©2026 Roblox Corporation、Roblox、Roblox 标志及 Powering Imagination 是我们在美国及其他国家或地区的注册与未注册商标。
条款·隐私政策·辅助功能·支持
中文(简体)