UI 動畫/補間 | 文件 - Roblox 創作者中心

在動畫中，補間是生成序列中兩個關鍵點之間的中間幀的過程。在設計用戶界面時，您可以使用補間將 GuiObject 從一個狀態平滑過渡到另一個狀態，例如：

當用戶選擇按鈕時，平滑地增加按鈕的大小。
從螢幕邊緣滑入和滑出 UI 菜單。
當用戶獲得健康增益時，逐漸在兩個寬度之間動畫化健康條。

單屬性補間

位置

要補間 GuiObject 的位置：

設定物件的 AnchorPoint。
確定物件目標位置的 UDim2 坐標，使用 UDim2 的比例參數，而不是確切的像素值，以便物件補間到螢幕的確切中心。
將 TweenInfo 和目標位置傳遞給 TweenService:Create()。
使用 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 的大小：

確定物件目標大小的 UDim2 坐標，使用 UDim2 的比例參數，而不是確切的像素值，以便物件補間到螢幕大小的相對百分比。
將 UIAspectRatioConstraint 附加到物件，以在補間時保持其設計的長寬比。
將 TweenInfo 和目標大小傳遞給 TweenService:Create()。
使用 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 的旋轉：

設定物件的 AnchorPoint 以便進行旋轉。
確定物件的目標 Rotation。
將 TweenInfo 和目標旋轉傳遞給 TweenService:Create()。
使用 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 物件	屬性
Frame	BackgroundTransparency
TextLabel	BackgroundTransparency, TextTransparency, TextStrokeTransparency
TextButton	BackgroundTransparency, TextTransparency, TextStrokeTransparency
ImageLabel	BackgroundTransparency, ImageTransparency
ImageButton	BackgroundTransparency, ImageTransparency

作為 TextLabel.TextStrokeTransparency 和 TextButton.TextStrokeTransparency 的現代替代方案，您可以在 UIStroke 物件上補間描邊透明度，如 Stroke 中所述。

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 物件	屬性
Frame	BackgroundColor3, BorderColor3
TextLabel	BackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
TextButton	BackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
ImageLabel	BackgroundColor3, BorderColor3, ImageColor3
ImageButton	BackgroundColor3, BorderColor3, ImageColor3

作為 GuiObject.BorderColor3、TextLabel.TextStrokeColor3 和 TextButton.TextStrokeColor3 的現代替代方案，您可以在 UIStroke 物件上補間描邊顏色，如 Stroke 中所述。

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 物件	屬性
Frame	BorderSizePixel, BorderColor3
TextLabel	BorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
TextButton	BorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
ImageLabel	BorderSizePixel, BorderColor3
ImageButton	BorderSizePixel, BorderColor3

另外，您可以應用 UIStroke 子物件並補間其厚度、顏色和/或透明度。

UI 物件	屬性
UIStroke	Color, 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()

補間序列

您可以鏈接 UI 動畫，使其一個接一個地發生，通過在前一個補間的 Completed 事件上播放後續補間。例如，以下腳本將物件移動到螢幕中心，然後將其旋轉 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。

樣式	描述
線性	以恆定速度移動。
正弦	速度由正弦波決定，形成柔和的緩動運動。
二次	類似於正弦，但基於二次插值的曲線稍微更陡。
三次	類似於二次，但基於三次插值的曲線稍微更陡。
四次	類似於三次，但基於四次插值的曲線更陡。
五次	類似於四次，但基於五次插值的曲線更陡。
指數	基於指數插值的最陡曲線。
圓形	遵循圓弧，使加速更突然，減速更平緩，相較於五次或指數。
回彈	稍微超過目標，然後回到原位。
彈跳	在達到目標後向後彈跳多次，然後最終穩定下來。
彈性	像是附著在橡皮筋上，超過目標幾次。

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})

打字機效果

您可以輕鬆增強基於文本的 UI，例如過場橫幅、玩家指示和提示，使用動畫效果。 "打字機" 效果非常適合 TextLabels，用於講述故事、輸出 NPC 對話等。

在 ReplicatedStorage 中創建一個新的 ModuleScript。
將新腳本重命名為 AnimateUI。

將以下代碼粘貼到腳本中：

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

如果您的遊戲的源語言不是英語 ("en")，請將 SOURCE_LOCALE 的區域代碼更改為與本地化設置中的源語言匹配。

在合適的位置創建一個 TextLabel，例如在 ScreenGui 中作為父物件。

插入一個新的 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)