UI 動畫/青少年 | 文件 - Roblox 創作者中心

在動畫中， tweening 是一個生成中間枕頭之間的枕頭的過程。當設計用戶界面時，您可以使用 tweening 來在一個狀態從另一個狀態順滑地移行：例如：

平滑按鈕大小，當使用者選擇它。
在屏幕邊緣之間滑動 UI 選單。
當使用者獲得健康提升時，會在兩個寬度之間帶動健康條。

單一屬性潛在客戶

位置

要調整 Class.GuiObject 的位置：

設置 AnchorPoint 為對物件。
使用 UDim2 的縮放參數，以準確的位置設定物件標位置，而不是使用盲目的位置來設定 Datatype.UDim2 的實際位置，以便讓對象擁有準確的中心位置。
通過 TweenInfo 和目標位置 TweenService:Create()。
播放 Tween:Play() 的擺動。

下列代碼示例將 ImageLabel 移動到 ScreenGui 的中心：

UI 滾動 - 位置
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()

大小

要調整 Class.GuiObject 的 GuiObject：

使用 UDim2 的縮放參數來確定物件標尺寸，並使用 Datatype.UDim2 的UDim2來調整目標尺寸。在目標尺寸上，對象會自動調整尺寸，以對應畫面尺寸的相對百分比。
附加 UIAspectRatioConstraint 至對象，以便在擺動時維持其設計的外觀比例。
通過 TweenInfo 和目標尺寸來傳递 TweenService:Create() 。
播放 Tween:Play() 的擺動。

下列代碼示例將 ImageLabel 內的 ScreenGui 調整為 40% 的屏幕寬度或高度 (哪一個更小) 從對物件的中心錨點：

介面暢閒 - 尺寸
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()

旋轉

要調整 Class.GuiObject 的旋轉：

設定AnchorPoint 以便對象旋轉。
為目標 Rotation 設定物件。
通過 TweenInfo 和目標旋轉到 TweenService:Create()。
播放 Tween:Play() 的擺動。

介面暢閒 - 尺寸
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 中，並擺動群組的 Class.CanvasGroup.GroupTransparency|GroupTrans

介面對象	屬性
Frame	BackgroundTransparency
TextLabel	BackgroundTransparency , TextTransparency , TextStrokeTransparency
TextButton	BackgroundTransparency , TextTransparency , TextStrokeTransparency
ImageLabel	BackgroundTransparency , ImageTransparency
ImageButton	BackgroundTransparency , ImageTransparency

作為現代的替代品 TextLabel.TextStrokeTransparency 和 TextButton.TextStrokeTransparency ，您可以在 UIStroke 對象上擺動石頭透明度如所述在 1>Stroke1> 。

介面暢閒 - 圖像透明度
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()

介面暢閱 - 畫布群組透明度
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 來減少對物件的顏色。

介面對象	屬性
Frame	BackgroundColor3 , BorderColor3
TextLabel	BackgroundColor3 , BorderColor3 , TextColor3 , 0> Class.TextLabel.TextStrokeColor3\|TextStrokeColor30>
TextButton	BackgroundColor3 , BorderColor3 , TextColor3 , 0> Class.TextButton.TextStrokeColor3\|TextStrokeColor30>
ImageLabel	BackgroundColor3 , BorderColor3 , ImageColor3
ImageButton	BackgroundColor3 , BorderColor3 , ImageColor3

作為現代的替代品 GuiObject.BorderColor3 、 TextLabel.TextStrokeColor3 和 TextButton.TextStrokeColor3 ，您可以在 1> 線條圖形1> 對象上斷線色的顏色作為在 4> 線條圖形4> 中所述的 <

介面暢閃 - 圖像顏色
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()

介面暢閱線圈顏色
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 邊界，視角型別取決於對象類輸入。

介面對象	屬性
Frame	BorderSizePixel , BorderColor3
TextLabel	BorderSizePixel , BorderColor3 , TextStrokeColor3 , 0> Class.TextLabel.TextStrokeTransparency\|TextStrokeTransparency0>
TextButton	BorderSizePixel , BorderColor3 , TextStrokeColor3 , 0> Class.TextButton.TextStrokeTransparencyTransparency0>
ImageLabel	BorderSizePixel , BorderColor3
ImageButton	BorderSizePixel , BorderColor3

您也可以應用 UIStroke 子和減少它的厚度、顏色和/或透明度。

介面對象	屬性
UIStroke	Color , Thickness , Transparency

介面暢閱線 - 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() 來將任何單一屬性 tweens 組合成更復雜的 tweens，例如 1> 位置 + 旋轉1> 或 4> 大小 + 透明度4>。

介面暢閒 - 位置和旋轉
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()

介面暢閒 - 尺寸和透明度
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 事件上玩次女孩，然後鏈接它們來發生相繼的暢銷動畫。例如，下列指令將一個對象移動到屏幕中央，然後旋轉它 45°。

介面潮汐順序
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)

減輕選項

使用 TweenInfo 的輕鬆選項，您可以控制介面動畫的風格和方向。

風格

Enum.EasingStyle 設定從開始到結束的平移速度。由預設情況下，平移風格設為 Enum.EasingStyle.Quad。

風格	說明
線性	移動速度不變。
正弧	速度由一個溫和的移動速度決定。
四重	與尖角相似，但曲線稍微更銳利，基於方塊方式。
立方體	與 Quad 相似，但以方塊乘數為基礎稍微調整曲線。
四分之一	與方塊類似，但曲線更銳利，基於四位量化。
Quint	與 Quart 相似，但曲線更銳利，並基於 quintic 間隔。
指數	以膳食模型為基礎的最鋒利的曲線。
圓形	跟隨圓形弧線，使加速和減速更為驟然和漸漸，與 Quint 或 Exponential 相比。
返回	稍微超出目標，然後回到原位空間。
彈跳	在達到目標後，跳躍多次後退，最終設定。
彈性	像附在橡皮筋上一樣移動，向目標射擊幾次。

Graphs of EasingStyle variations with an 'In' EasingDirection.

減速風格 - 立方體
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic)
local tween = TweenService:Create(object, tweenInfo, {Rotation = 45})

方向

Enum.EasingDirection 定義了如何對一個對物件適用簡化風格的 interpolation，以預設值關閉。注意，與線性簡化風格的斷線不相關，因為斷線與 0>線性0> 簡化風格一致。

方向	說明
在	容緩風格在前方方向中適用。
退出	緩壓風格在倒向方向中適用。
出入口	簡化風格在第一個半段適用前進，而在第二個半段適用後倒退。

方向放鬆 - InOut
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic, Enum.EasingDirection.InOut)
local tween = TweenService:Create(object, tweenInfo, {Rotation = 45})

動畫文字

您可以使用動畫效果強化文字基礎用戶界面，例如切場橫幅、玩家指示和提示。

打字機效果

「打字機」效果適合 TextLabels 會輸出故事、輸出 NPC 對話等。

在 ModuleScript 內建立新 Class.ModuleScript。
重新命名新腳本 AnimateUI 。

將以下代碼貼入指令碼：

ModuleScript - 動畫介面
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 標籤，因為 char-by-char 動畫會斷開標籤
	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 以與源語言在 1>本地化設定1> 中匹配。

在適當位置創建 TextLabel，例如在 ScreenGui 內，與 StarterGui 親級。

將新的 LocalScript 作為標籤的直接兒子，並在以下代碼中輸入。注意，每個訊息都是由呼叫 AnimateUI.typeWrite() 並參數為父對物件、輸出字串和延遲時間之間的延遲。

本地指令碼
local ReplicatedStorage = game:GetService("ReplicatedStorage")

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

local label = script.Parent

-- 載入翻譯，如果遊戲是本地化的
--AnimateUI.loadTranslator()

local message1 = [[Beyond this door is the<br /><font size="46" color="rgb(255,50,25)">Great Zorgoth...</font> <font size="40">🗡</font>]]
AnimateUI.typeWrite(label, message1, 0.05)

task.wait(1)

local message2 = [[...who rules this dungeon <font color="rgb(255,200,50)">unchallenged!</font> <font size="30">😈</font>]]
AnimateUI.typeWrite(label, message2, 0.05)