อนิเมชั่น UI/Tweens

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

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

ทวีนส์อสุนัข

ตําแหน่ง

เพื่อปรับ ตําแหน่ง ของ a GuiObject :

1. ตั้งค่า AnchorPoint สำหรับวัตถุ
2. กำหนดตำแหน่งเหยี่ยวของตัวอย่างโดยใช้ UDim2 โดยใช้ สมบัติแห่งขนาดเรียบร้อยของ Datatype.UDim2 แทนที่จะเป็น UDim2 ที่แท้จร
3. ผ่าน a 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()

ขนาด

เพื่อปรับขนาด ของ Class.GuiObject :

1. กำหนด UDim2 ความลึกของตัวเป้าหมายสำหรับขนาดเป้าหมายของตัวเป้าหมายโดยใช้ สกาลเปเปอร์ พารามิเตอร์ของ UDim2 แทนที่จะเป็นค่าพิกเซลที่แน่นอนเ
2. แนบ UIAspectRatioConstraint ไว้กับวัตถุเพื่อให้ความสัมพันธ์ระหว่างมุมมองของมันเมื่อปรับแต่ง
3. ผ่าน TweenInfo และขนาดเป้าหมายเป็น TweenService:Create()
4. เล่นทวีนกับ Tween:Play()

ตัวอย่างโค้ดต่อไปนี้ขยาย Class.ImageLabel ภายใน Class.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. ผ่าน a 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()

ความโปร่งใส

หน้าตา UI การควบคุมของหลายองค์กร ขึ้นอยู่กับประเภทของวัตถุ คุณสามารถปรับแต่งความโปร่งใสของ UI แต่ละรายการได้โดยผ่าน UI ทวีคูณหลายองค์ก

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 การควบคุมสถานะทรงตัวอย่างหลายรายการสีของเครื่องมือควบคุมสถานะทรงตัวอย่างหลายรายการขึ้นอยู่กับประเภทของวัตถุ คุณสามารถปรับแต่งสีข

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 พิมพ์

นอกจากนี้คุณยังสามารถใช้ลูกชาย UIStroke และปรับแต่งความหนาแน่น สี และ/หรือความโปร่งใสของมัน

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()

ทวีนสมบัติของหลาย

คุณสามารถผสานใด ๆ ของ เด็กผู้ใหญ่ของคุณเดี่ยว ในเด็กผู้ใหญ่ที่ซับซ้อนมากขึ้นด้วยการส่งมาตรฐานต่างๆ ให้กับ 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 ตัวอัปรุกตัวอันนี้ สกริปต์ต่อไปนี้ย้ายวัตถุไปยังศูนย์ของ

ลำดับการเปลี่ยนแปลง 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 คุณสามารถควบคุมสไตล์ style และทิศทาง direction ของอนิเมชั่น UI

สไตล์

Enum.EasingStyle ปิดโดยปกติอัตราการแปลงจะตั้งค่าเป็น Enum.EasingStyle.Quad

สไตล์การลดลง - ลูกบาศก์
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic)
local tween = TweenService:Create(object, tweenInfo, {Rotation = 45})

ทิศทาง

Enum.EasingDirection กำหนดวิธีการที่ เส้นสายการปรับปรุง ใช้กับวัตถุโดยมีค่าเริ่มต้นของ ออก โปรดทราบว่าการปรับปรุงด้วยวิธีการปรับปรุง 0>เส้นสาย

เอาออก - InOut
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic, Enum.EasingDirection.InOut)
local tween = TweenService:Create(object, tweenInfo, {Rotation = 45})

การแสดงผลข้อความ

คุณสามารถปรับปรุง UI ขึ้นได้อย่างง่ายดาย เช่นเมนู cutscene และคำแนะนำของผู้เล่น และปุ่มเรียกร้องได้ด้วยเอฟเฟกต์อนิเมชัน

เอฟเฟ็กต์ของ Typewriter

เอฟเฟกต์ "นาฬิกาพิมพ์" เหมาะสำหรับ 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

   หากภาษาที่ใช้ในประสบการณ์ของคุณไม่ใช่ภาษาอังกฤษ ( en ) เปลี่ยนรหัสภูมิภาคเป็น "en" เพื่อตรงกับภาษาที่ใช้ในการตั้งค่าการแปลใน SOURCE_LOCALE

4. สร้าง TextLabel ในสถานที่ที่เหมาะสม เช่น ใน ScreenGui ที่มีลูกโดย StarterGui

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