แอนิเมชั่น UI/วัยรุ่น

*เนื้อหานี้แปลโดยใช้ AI (เวอร์ชัน Beta) และอาจมีข้อผิดพลาด หากต้องการดูหน้านี้เป็นภาษาอังกฤษ ให้คลิกที่นี่

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

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

วัยรุ่นหนึ่งคุณสมบัติ

ตำแหน่ง

เพื่อแยกตําแหน่ง **** ของ GuiObject :

  1. ตั้งค่า AnchorPoint สำหรับวัตถุ
  2. กำหนด พิกัดสำหรับตำแหน่งเป้าหมายของวัตถุโดยใช้พารามิเตอร์ ขนาด ของ แทนค่าพิกเซลที่แน่นอนเพื่อให้วัยรุ่นวัตถุอยู่ในศูนย์กลางของหน้าจออย่างแม่นยำ
  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()

ความโปร่งใส

ควบคุมความโปร่งใสของอินเทอร์เฟซผู้ใช้หลายคุณสมบัติขึ้นอยู่กับประเภทวัตถุคุณสามารถแยกแยะแต่ละคุณสมบัติเหล่านี้แยกต่างหากหรือรวมผ่าน ทวีนคุณสมบัติหลายอย่างหรือคุณสามารถแบ่งความโปร่งใสโดยรวมของวัตถุโดยวางไว้ภายใน 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()

วัยรุ่นหลายคุณสมบัติ

คุณสามารถรวมเด็กวัยรุ่นที่มีคุณสมบัติเดียวใดๆ ได้เป็นวัยรุ่นที่ซับซ้อนมากขึ้นโดยส่งคุณสมบัติเป้าหมายหลายอย่างไปยัง ตัวอย่างเช่น ตำแหน่ง + การหมุน หรือ ขนาด + ความโปร่งใส

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 ระหว่างกลาง
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

สไตล์คําอธิบาย
เชิงเส้น เคลื่อนที่ด้วยความเร็วคงที่
ไซน์ ความเร็วจะถูกกำหนดโดยคลื่นไซน์สำหรับการเคลื่อนไหวผ่อนคลายเล็กน้อย
ควอด คล้ายกับ ไซน์ แต่มีเส้นโค้งที่แหลมคมขึ้นเล็กน้อยขึ้นอยู่กับการคูณขั้นที่สี่
ทรงกลม คล้ายกับ Quad แต่มีเส้นโค้งที่แหลมคมขึ้นเล็กน้อยขึ้นอยู่กับการ interpolation ทรงกลม
ไตรมาส คล้ายกับ ทรงกลม แต่มีเส้นโค้งที่แหลมคมยิ่งขึ้นขึ้นอยู่กับ interpolation ควอติก
ควินท์ คล้ายกับ ไตรมาส แต่มีเส้นโค้งที่คมขึ้นโดยใช้ quintic interpolation
อัตราทวีคูณ โค้งที่แหลมคมที่สุดขึ้นอยู่กับการคูณอัตราเร่ง
วงกลม ปฏิบัติตามวงโคจรวงกลมที่ทำให้การเร่งความเร็วรวดเร็วขึ้นและการชะลอตัวช้าลงกว่า ควินท์ หรือ เอ็กซ์โปเนนเชียล
กลับ สถานที่
เด้งกลับ เด้งกลับไปข้างหลังหลายครั้งหลังจากถึงเป้าหมายก่อนที่จะตั้งค่าในที่สุด
ยืดหยุ่น เคลื่อนไหวเหมือนติดกับสายรubber เกินเป้าหมายหลายครั้ง
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})

แอนิเมชั่นข้อความ

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

เอฟเฟกต์เครื่องพิมพ์

เอฟเฟกต์ "เครื่องพิมพ์" เหมาะสำหรับ TextLabels ที่บอกเล่าเรื่องราว ส่งออกการสนทนา NPC ฯลฯ

  1. สร้างใหม่ ModuleScript ภายใน ReplicatedStorage .

  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 เนื่องจากแอนิเมชั่น 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

  4. สร้าง TextLabel ในตำแหน่งที่เหมาะสม เช่น ภายใน ScreenGui พ่วงกับ StarterGui

  5. ใส่ 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)