創作者

UI 動畫/補間

*此內容是使用 AI（Beta 測試版）翻譯，可能含有錯誤。若要以英文檢視此頁面，請按一下這裡。

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

  • 當用戶選擇按鈕時平滑增大按鈕的大小。
  • 使 UI 菜單從屏幕邊緣滑入和滑出。
  • 當用戶獲得生命值增益時，漸漸動動畫生命條在兩個寬度之間。

單屬性補間

位置

要補間 GuiObject 的 位置：

  1. 設置物件的 AnchorPoint。
  2. 使用 UDim2 坐標確定物件的目標位置，使用 UDim2 的 比例 參數而不是精確的像素值，以便物件補間到屏幕的精確中心。
  3. 將 TweenInfo 和目標位置傳遞給 TweenService:Create()。
  4. 使用 Tween:Play() 播放補間。

以下代碼片段將 ImageLabel 移動到 ScreenGui 的屏幕正中央：

UI Tween - 位置
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 - 大小
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 - 旋轉
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 - 圖像透明度
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 - 畫布組透明度
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 - 圖像顏色
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 - 畫布組顏色
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

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

UI 物件屬性
UIStrokeColor, Thickness, Transparency
UI Tween - UIStroke 顏色與厚度
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 - 位置與旋轉
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 - 大小與透明度
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 序列
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 定義進行補間。詳情請參見 Style Editor 指南。

樣式編輯器中的最終樣式規則。

緩和選項

使用 TweenInfo 的緩和選項，您可以控制 UI 動畫的緩和 樣式 和 方向。

樣式

Enum.EasingStyle 設定從開始到結束的插值速率。預設情況下，緩和樣式設置為 Enum.EasingStyle.Quad。

樣式描述
線性以恆定速度移動。
正弦速度由正弦波決定，以實現柔和的緩和運動。
二次類似於 正弦，但基於二次插值的曲線略為陡峭。
三次類似於 二次，但基於三次插值的曲線略為陡峭。
四次類似於 三次，但基於四次插值的曲線更為陡峭。
五次類似於 四次，但基於五次插值的曲線更加陡峭。
指數基於指數插值的最陡曲線。
圓形遵循圓弧，使加速更突然，而減速更平緩，與 五次 或 指數 相比。
回彈稍微超過目標，然後回到位置。
反彈在到達目標後向後反彈多次，然後最終穩定下來。
彈性移動時如同附著在橡皮筋上，多次超過目標。
帶有'進入'緩和方向的緩和樣式變化圖。 
緩和樣式 - 三次
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic)

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

方向

Enum.EasingDirection 定義了 緩和樣式 插值如何應用於物件，預設為 退出。請注意，使用 線性 緩和樣式的補間不受影響，因為線性插值從開始到結束是恆定的。

方向描述
進入緩和樣式向前應用。
退出緩和樣式反向應用。
進入退出緩和樣式在前半部分向前應用，後半部分反向應用。
緩和方向 - 進入退出
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic, Enum.EasingDirection.InOut)

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

打字機效果

您可以輕鬆地為基於文本的 UI 增強動畫效果，例如過場橫幅、玩家說明和提示。"打字機" 效果非常適合 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. 在合適的位置創建一個 TextLabel，例如在 ScreenGui 中的父物件。

  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 是我們在美國及其他國家地區的部分註冊與未註冊商標。
條款·隱私權·無障礙功能·支援
中文(繁體)