การอนิเมต UI / Tween | เอกสาร - ศูนย์กลางครีเอเตอร์ Roblox

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

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

Tween โดยคุณสมบัติเดียว

ตำแหน่ง

ในการทวิพีนน ตำแหน่ง ของ GuiObject:

ตั้งค่า AnchorPoint สำหรับวัตถุ
กำหนดพิกัด UDim2 สำหรับตำแหน่งเป้าหมายของวัตถุ โดยใช้พารามิเตอร์ scale ของ UDim2 แทนค่าพิกเซลที่แน่นอน เพื่อให้วัตถุทวิพีนนไปยังจุดกึ่งกลางของหน้าจอ
ส่ง TweenInfo และตำแหน่งเป้าหมายให้กับ TweenService:Create()
เล่นการทวิพีนนด้วย 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:

กำหนดพิกัด UDim2 สำหรับขนาดเป้าหมายของวัตถุ โดยใช้พารามิเตอร์ scale ของ UDim2 แทนค่าพิกเซลที่แน่นอน เพื่อให้วัตถุทวิพีนนไปยังเปอร์เซ็นต์สัมพัทธ์ของขนาดหน้าจอ
แนบ UIAspectRatioConstraint กับวัตถุเพื่อรักษาสัดส่วนที่ออกแบบไว้เมื่อทวิพีนน
ส่ง TweenInfo และขนาดเป้าหมายให้กับ TweenService:Create()
เล่นการทวิพีนนด้วย 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:

ตั้งค่า AnchorPoint สำหรับวัตถุที่ต้องการหมุนรอบ
กำหนด Rotation เป้าหมายสำหรับวัตถุ
ส่ง TweenInfo และการหมุนเป้าหมายให้กับ TweenService:Create()
เล่นการทวิพีนนด้วย 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 ขึ้นอยู่กับประเภทวัตถุ คุณสามารถทวิพีนนแต่ละคุณสมบัติเหล่านี้แบบเดี่ยวหรือรวมกันผ่าน multi-property tween นอกจากนี้คุณยังสามารถทวิพีนนความโปร่งใสโดยรวมของวัตถุด้วยการใส่ไว้ใน 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 - ความโปร่งใสของภาพ
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 ขึ้นอยู่กับประเภทวัตถุ คุณสามารถทวิพีนนแต่ละคุณสมบัติเหล่านี้แบบเดี่ยวหรือรวมกันผ่าน multi-property tween นอกจากนี้คุณยังสามารถทวิพีนนสีโดยรวมของวัตถุด้วยการใส่ไว้ใน 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 - สีของภาพ
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	คุณสมบัติ
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
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()

Tween หลายคุณสมบัติ

คุณสามารถรวม tween โดยคุณสมบัติเดียว เข้าด้วยกันเพื่อสร้างการทวิพีนนที่ซับซ้อนมากขึ้นโดยการส่งคุณสมบัติเป้าหมายหลายๆ อย่างให้กับ 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 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

สไตล์	คำอธิบาย
เส้นตรง	เคลื่อนที่ที่ความเร็วคงที่
ไซน์	ความเร็วถูกกำหนดโดยคลื่นไซน์สำหรับการเคลื่อนที่อย่างอ่อนโยน
Quad	เหมือนกับ ไซน์ แต่มีความโค้งที่ค่อนข้างชันตามการแทรกซึมแบบกำลังสอง
ลูกบาศก์	เหมือนกับ Quad แต่มีความโค้งที่ค่อนข้างชันตามการแทรกซึมแบบลูกบาศก์
Quart	เหมือนกับ ลูกบาศก์ แต่มีความโค้งที่ชันยิ่งขึ้นตามการแทรกซึมแบบกำลัง4
Quint	เหมือนกับ Quart แต่มีความโค้งที่ชันยิ่งขึ้นตามการแทรกซึมแบบกำลัง5
เอ็กซ์โพเนนเชียล	ความโค้งที่ชันที่สุดตามการแทรกซึมแบบเอ็กซ์โพเนนเชียล
วงกลม	ตามเส้นโค้งกลม ทำให้การเร่งความเร็วเกิดขึ้นอย่างเฉียบพลันและการลดความเร็วเกิดขึ้นอย่างค่อยเป็นค่อยไป เทียบกับ Quint หรือ เอ็กซ์โพเนนเชียล
การกลับมา	เล็งไปที่เป้าหมายเล็กน้อยก่อนที่จะกลับเข้าที่
การเด้ง	เด้งกลับหลายครั้งหลังจากถึงเป้าหมายก่อนที่จะตั้งอยู่ในที่สุด
ยืดหยุ่น	เคลื่อนที่เสมือนถูกติดกับยางยืด และเลยเป้าหมายไปหลายครั้ง

Easing Style - ลูกบาศก์
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic)
local tween = TweenService:Create(object, tweenInfo, {Rotation = 45})

ทิศทาง

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

ทิศทาง	คำอธิบาย
ใน	สไตล์การหน่วงเวลาจะใช้ในทิศทางไปข้างหน้า
ออก	สไตล์การหน่วงเวลาจะใช้ในทิศทางย้อนกลับ
ในและออก	สไตล์การหน่วงเวลาจะใช้ไปข้างหน้าในช่วงครึ่งแรก และย้อนกลับในช่วงครึ่งหลัง

ทิศทางการหน่วงเวลา - ในและออก
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)