用戶介面動畫/青少年

在動畫中，過渡是在順序中的兩個關鍵點之間生成中間框架的過程。當設計使用者介面時,您可以使用漸進來順暢地將GuiObject從一個狀態轉到另一個狀態,例如:

當使用者選擇按鈕時，平滑地增加按鈕的尺寸。
從屏幕邊緣滑動的 UI 選單進入和退出。
逐漸在兩個寬度之間動畫健康條，當使用者收到健康提升時。

單一屬性青少年

位置

要減少位置的 GuiObject :

為對物件設置 AnchorPoint。
使用縮放參數的來確定對物件的目標位置的坐標，而不是使用準確的像素值，將對象調整到屏幕的正中心。
傳送 TweenInfo 和目標位置給 TweenService:Create() 。
使用 Tween:Play() 播放青少年。

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

介面漸變 - 位置
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 減少到一半：

使用縮放參數的來確定對物件的目標尺寸，而不使用準確的像素值，以便對象調整到相對於屏幕尺寸的百分比。
將 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()

旋轉

要轉換旋轉的 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 和 GroupTransparency 內的群組中，來調整對物件的整體透明度。

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

作為現代替代 TextLabel.TextStrokeTransparency 和 TextButton.TextStrokeTransparency 的方式，您可以在 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("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()

顏色

多個屬性控制介面顏色，取決於對象輸入。您可以單獨或通過多個屬性轉換來分別或結合這些屬性。或者，您可以將對物件的整體顏色放置在 CanvasGroup 內，並減緩群組的 GroupColor3 。

使用者介面對象	屬性
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 對象上調整線條顏色，如同在線條中所述。

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

輪廓

多個屬性控制介面邊界，取決於對象類輸入。

使用者介面對物件	屬性
Frame	BorderSizePixel , BorderColor3
TextLabel	BorderSizePixel , BorderColor3 , TextStrokeColor3 , TextStrokeTransparency
TextButton	BorderSizePixel , BorderColor3 , TextStrokeColor3 , TextStrokeTransparency
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() ，例如位置+旋轉或尺寸+透明度。

介面漸變 - 位置與旋轉
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()

中青少年順序

您可以將 UI 動畫鏈接到發生一個接一個的情況，通過在前一個漢子的 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 的放鬆選項，您可以控制 UI 動畫的放鬆風格和方向。

風格

Enum.EasingStyle 設置從開始到結束的插值速率。默認情況下，寬容風格設置為 Enum.EasingStyle.Quad 。

風格	說明
線性	以恆定速度移動。
正弦	速度由一個減速波決定，用於輕微的放鬆運動。
四倍	與三角形相似，但基於指數曲線稍微更鋒利。
立方體	與四倍相似，但基於立方體插值的彎曲稍微更鋒利。
分之四	與立方體相似，但基於四次方插值的更鋒利的曲線。
昆特	與四分之一相似，但基於 quintic 插值的曲線更鋒利。
指數	基於指數乘法的最鋒利的曲線。
圓形	遵循圓形曲線，使加速更突然，減速更平緩，比五分之一或指數更多。
返回	稍微超出目標，然後返回到位空間。
彈跳	在達到目標後多次向後跳躍，最終定居之前。
彈性	如同附在橡膠帶上一樣，超過目標幾次。

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 定義如何使用減緩風格對物件的插入，默認為退出。請注意，使用線性減速風格的青少年並不受影響，因為線性插值從開始到結束都是恆定的。

方向	說明
In	寬鬆風格適用於向前的方向。
退出	寬鬆風格在逆向方向應用。
退出	寬鬆風格適用於前半場和後半場反向。

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

動畫文字

您可以使用動畫效果輕鬆強化文字基礎的使用者介面，例如切場廣告、玩家說明和提示。

打字機效果

「打字機」效果非常適合 TextLabels 那些會講故事、輸出 NPC 對話等等的情況

在 ModuleScript 內創建一個新的 **** 。
重命名新腳本 AnimateUI 。

將以下代碼貼到腳指令碼中：

模組腳本 - 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

如果你的體驗的來源語言不是英文(>)，請在本地化設定中將本地代碼更改為與來源語言匹配的英文。

在適當位置創建，例如內置於的父處。

插入新的 LocalScript 作為標籤的直接子女，然後粘貼以下代碼。請注意，每個訊息都由呼叫 AnimateUI.typeWrite() 來輸出父對物件的參數、要輸出的字串和字元間的延遲。

本地脚本
local ReplicatedStorage = game:GetService("ReplicatedStorage")

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

local label = script.Parent

-- 如果遊戲已本地化，載入翻譯者
--AnimatUI.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)

此頁面