การเคลื่อนไหว UI/การเปลี่ยนแปลง | เอกสาร

ในการเคลื่อนไหว, การเปลี่ยนแปลง คือกระบวนการสร้างเฟรมกลางระหว่างสองจุดสำคัญในลำดับ เมื่อออกแบบส่วนติดต่อผู้ใช้, คุณสามารถใช้การเปลี่ยนแปลงเพื่อเปลี่ยน GuiObject อย่างราบรื่นจากสถานะหนึ่งไปยังอีกสถานะหนึ่ง เช่น:

เพิ่มขนาดของปุ่มอย่างราบรื่นเมื่อผู้ใช้เลือกมัน
เลื่อนเมนู UI เข้ามาและออกจากขอบหน้าจอ
เคลื่อนไหวแถบสุขภาพอย่างค่อยเป็นค่อยไประหว่างความกว้างสองค่าเมื่อผู้ใช้ได้รับการเพิ่มสุขภาพ

การเปลี่ยนแปลงคุณสมบัติเดียว

ตำแหน่ง

ในการเปลี่ยนแปลง ตำแหน่ง ของ GuiObject:

ตั้งค่า AnchorPoint สำหรับวัตถุ
กำหนดพิกัด UDim2 สำหรับตำแหน่งเป้าหมายของวัตถุ โดยใช้พารามิเตอร์ scale ของ 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 สำหรับขนาดเป้าหมายของวัตถุ โดยใช้พารามิเตอร์ scale ของ 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 ดูคู่มือ Style Editor สำหรับรายละเอียด.

กฎสถานะที่มีสไตล์สุดท้ายใน Style Editor.

ตัวเลือกการทำให้เรียบ

โดยใช้ตัวเลือกการทำให้เรียบของ TweenInfo, คุณสามารถควบคุม สไตล์ และ ทิศทาง ของการเคลื่อนไหว UI.

สไตล์

Enum.EasingStyle ตั้งอัตราการแทรกซึมจากจุดเริ่มต้นไปยังจุดสิ้นสุด โดยค่าเริ่มต้น, สไตล์การทำให้เรียบจะถูกตั้งค่าเป็น Enum.EasingStyle.Quad.

สไตล์	คำอธิบาย
Linear	เคลื่อนที่ด้วยความเร็วคงที่.
Sine	ความเร็วถูกกำหนดโดยคลื่นไซน์เพื่อให้การเคลื่อนไหวที่นุ่มนวล.
Quad	คล้ายกับ Sine แต่มีโค้งที่คมชัดกว่าขึ้นอยู่กับการแทรกซึมแบบพหุนาม.
Cubic	คล้ายกับ Quad แต่มีโค้งที่คมชัดกว่าขึ้นอยู่กับการแทรกซึมแบบลูกบาศก์.
Quart	คล้ายกับ Cubic แต่มีโค้งที่คมชัดยิ่งขึ้นขึ้นอยู่กับการแทรกซึมแบบพหุนามสี่.
Quint	คล้ายกับ Quart แต่มีโค้งที่คมชัดยิ่งขึ้นขึ้นอยู่กับการแทรกซึมแบบพหุนามห้า.
Exponential	โค้งที่คมชัดที่สุดขึ้นอยู่กับการแทรกซึมแบบเลขชี้กำลัง.
Circular	ติดตามเส้นโค้งวงกลม, ทำให้การเร่งความเร็วเกิดขึ้นอย่างกะทันหันและการชะลอตัวเกิดขึ้นอย่างค่อยเป็นค่อยไปเมื่อเปรียบเทียบกับ Quint หรือ Exponential.
Back	เล็กน้อยเกินเป้าหมาย, แล้วกลับเข้าที่.
Bounce	กระเด้งถอยหลังหลายครั้งหลังจากถึงเป้าหมาย, ก่อนที่จะตั้งอยู่ในที่สุด.
Elastic	เคลื่อนที่เหมือนติดอยู่กับยางยืด, เกินเป้าหมายหลายครั้ง.

กราฟของการเปลี่ยนแปลงสไตล์ที่มี 'In' EasingDirection.

Easing Style - Cubic

local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic)
local tween = TweenService:Create(object, tweenInfo, {Rotation = 45})

ทิศทาง

Enum.EasingDirection กำหนดว่าการแทรกซึม สไตล์การทำให้เรียบ จะนำไปใช้กับวัตถุอย่างไร โดยค่าเริ่มต้นคือ Out หมายเหตุว่าการเปลี่ยนแปลงที่มีสไตล์การทำให้เรียบ Linear จะไม่ได้รับผลกระทบ เนื่องจากการแทรกซึมเชิงเส้นเป็นค่าคงที่จากจุดเริ่มต้นไปยังจุดสิ้นสุด

ทิศทาง	คำอธิบาย
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, เป็นต้น

สร้าง ModuleScript ใหม่ภายใน ReplicatedStorage.
เปลี่ยนชื่อสคริปต์ใหม่เป็น 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

	-- แทนที่แท็กการขึ้นบรรทัดใหม่เพื่อให้ลูป grapheme จะไม่พลาดตัวอักษรเหล่านั้น
	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 ที่เป็นลูกของ StarterGui.

แทรก LocalScript ใหม่เป็นลูกตรงของป้ายชื่อและวางโค้ดต่อไปนี้ลงไป โปรดทราบว่าข้อความแต่ละข้อความจะถูกแสดงโดยการเรียก AnimateUI.typeWrite() พร้อมพารามิเตอร์สำหรับวัตถุพ่อแม่, สตริงที่จะแสดง, และความล่าชาระหว่างตัวอักษร.

LocalScript

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)