Animasi UI/tweens | Dokumentasi - Pusat Kreator Roblox

Dalam animasi, tweening adalah proses menghasilkan frame antara dua titik kunci dalam sebuah urutan. Saat merancang antarmuka pengguna, Anda dapat menggunakan tweening untuk mentransisikan GuiObject dengan mulus dari satu keadaan ke keadaan lain, seperti:

Meningkatkan ukuran tombol dengan mulus saat pengguna memilihnya.
Menggeser menu UI masuk dan keluar dari tepi layar.
Secara bertahap menganimasi bilah kesehatan antara dua lebar saat pengguna menerima peningkatan kesehatan.

Tween satu properti

Posisi

Untuk tween posisi dari GuiObject:

Atur AnchorPoint untuk objek tersebut.
Tentukan koordinat UDim2 untuk posisi target objek, menggunakan parameter scale dari UDim2 alih-alih nilai piksel yang tepat sehingga objek tween ke pusat layar yang tepat.
Berikan TweenInfo dan posisi target ke TweenService:Create().
Putar tween dengan Tween:Play().

Potongan kode berikut memindahkan ImageLabel dalam ScreenGui ke pusat layar yang tepat:

UI Tween - Posisi

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

Ukuran

Untuk tween ukuran dari GuiObject:

Tentukan koordinat UDim2 untuk ukuran target objek, menggunakan parameter scale dari UDim2 alih-alih nilai piksel yang tepat sehingga objek tween ke persentase relatif dari ukuran layar.
Pasang UIAspectRatioConstraint ke objek untuk mempertahankan rasio aspek yang dirancang saat tweening.
Berikan TweenInfo dan ukuran target ke TweenService:Create().
Putar tween dengan Tween:Play().

Potongan kode berikut mengubah ukuran ImageLabel dalam ScreenGui menjadi 40% dari lebar atau tinggi layar (mana yang lebih kecil) dari titik jangkar pusat objek:

UI Tween - Ukuran

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

Rotasi

Untuk tween rotasi dari GuiObject:

Atur AnchorPoint untuk objek yang akan diputar.
Tentukan Rotation target untuk objek tersebut.
Berikan TweenInfo dan rotasi target ke TweenService:Create().
Putar tween dengan Tween:Play().

UI Tween - Ukuran

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

Transparansi

Beberapa properti mengontrol transparansi UI, tergantung pada jenis objek. Anda dapat tween masing-masing properti ini secara individu atau digabungkan melalui multi-property tween. Sebagai alternatif, Anda dapat tween transparansi keseluruhan objek dengan menempatkannya di dalam CanvasGroup dan tween transparansi grup GroupTransparency.

Objek UI	Properti
Frame	BackgroundTransparency
TextLabel	BackgroundTransparency, TextTransparency, TextStrokeTransparency
TextButton	BackgroundTransparency, TextTransparency, TextStrokeTransparency
ImageLabel	BackgroundTransparency, ImageTransparency
ImageButton	BackgroundTransparency, ImageTransparency

Sebagai alternatif modern untuk TextLabel.TextStrokeTransparency dan TextButton.TextStrokeTransparency, Anda dapat tween transparansi stroke pada objek UIStroke seperti yang dijelaskan dalam Stroke.

UI Tween - Transparansi Gambar

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 - Transparansi Grup Kanvas

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

Warna

Beberapa properti mengontrol warna UI, tergantung pada jenis objek. Anda dapat tween masing-masing properti ini secara individu atau digabungkan melalui multi-property tween. Sebagai alternatif, Anda dapat tween warna keseluruhan objek dengan menempatkannya di dalam CanvasGroup dan tween warna grup GroupColor3.

Objek UI	Properti
Frame	BackgroundColor3, BorderColor3
TextLabel	BackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
TextButton	BackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
ImageLabel	BackgroundColor3, BorderColor3, ImageColor3
ImageButton	BackgroundColor3, BorderColor3, ImageColor3

Sebagai alternatif modern untuk GuiObject.BorderColor3, TextLabel.TextStrokeColor3, dan TextButton.TextStrokeColor3, Anda dapat tween warna stroke pada objek UIStroke seperti yang dijelaskan dalam Stroke.

UI Tween - Warna Gambar

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 - Warna Grup Kanvas

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

Stroke

Beberapa properti mengontrol batas UI, tergantung pada jenis objek.

Objek UI	Properti
Frame	BorderSizePixel, BorderColor3
TextLabel	BorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
TextButton	BorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
ImageLabel	BorderSizePixel, BorderColor3
ImageButton	BorderSizePixel, BorderColor3

Sebagai alternatif, Anda dapat menerapkan anak UIStroke dan tween ketebalan, warna, dan/atau transparansinya.

Objek UI	Properti
UIStroke	Color, Thickness, Transparency

UI Tween - Warna & Ketebalan 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 multi-properti

Anda dapat menggabungkan salah satu dari tween satu properti menjadi tween yang lebih kompleks dengan memberikan beberapa properti target ke TweenService:Create(), misalnya posisi + rotasi atau ukuran + transparansi.

UI Tween - Posisi & Rotasi

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 - Ukuran & Transparansi

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

Urutan tween

Anda dapat menghubungkan animasi UI untuk terjadi satu setelah yang lain dengan memutar tween berikutnya setelah event Completed dari tween sebelumnya. Misalnya, skrip berikut memindahkan objek ke pusat layar, kemudian memutarnya sebesar 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})

-- Awalnya putar tween posisi
positionTween:Play()

-- Putar tween rotasi setelah tween posisi selesai
positionTween.Completed:Connect(function()
	rotationTween:Play()
end)

Transisi gaya

Objek UI juga dapat dianimasi melalui transisi gaya, yang sebanding dengan transisi CSS, di mana satu atau lebih properti UI di tween melalui definisi StyleRule. Lihat panduan Editor Gaya untuk detail lebih lanjut.

Aturan keadaan akhir yang distilasi di Editor Gaya.

Opsi easing

Dengan menggunakan opsi easing dari TweenInfo, Anda dapat mengontrol gaya dan arah easing dari animasi UI.

Gaya

Enum.EasingStyle mengatur laju interpolasi dari awal hingga akhir. Secara default, gaya easing diatur ke Enum.EasingStyle.Quad.

Gaya	Deskripsi
Linear	Bergerak dengan kecepatan konstan.
Sine	Kecepatan ditentukan oleh gelombang sinus untuk gerakan easing yang lembut.
Quad	Mirip dengan Sine tetapi dengan kurva yang sedikit lebih tajam berdasarkan interpolasi kuadratik.
Cubic	Mirip dengan Quad tetapi dengan kurva yang sedikit lebih tajam berdasarkan interpolasi kubik.
Quart	Mirip dengan Cubic tetapi dengan kurva yang lebih tajam berdasarkan interpolasi kuartik.
Quint	Mirip dengan Quart tetapi dengan kurva yang lebih tajam berdasarkan interpolasi quintik.
Exponential	Kurva paling tajam berdasarkan interpolasi eksponensial.
Circular	Mengikuti busur melingkar, sehingga percepatan lebih mendadak dan perlambatan lebih bertahap dibandingkan dengan Quint atau Exponential.
Back	Sedikit melampaui target, kemudian kembali ke tempat.
Bounce	Memantul ke belakang beberapa kali setelah mencapai target, sebelum akhirnya menetap.
Elastic	Bergerak seolah terikat pada karet, melampaui target beberapa kali.

Grafik variasi EasingStyle dengan 'In' EasingDirection.

Easing Style - Cubic

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

Arah

Enum.EasingDirection mendefinisikan bagaimana interpolasi gaya easing diterapkan pada objek, dengan default Out. Perhatikan bahwa tween dengan gaya easing Linear tidak terpengaruh, karena interpolasi linier konstan dari awal hingga akhir.

Arah	Deskripsi
In	Gaya easing diterapkan dalam arah maju.
Out	Gaya easing diterapkan dalam arah mundur.
InOut	Gaya easing diterapkan maju untuk setengah pertama dan mundur untuk setengah kedua.

Arah easing - InOut

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

Efek mesin ketik pada teks

Anda dapat dengan mudah meningkatkan UI berbasis teks, seperti spanduk cutscene, instruksi pemain, dan prompt, dengan efek animasi. Efek "mesin ketik" sangat ideal untuk TextLabels yang menceritakan sebuah cerita, menampilkan percakapan NPC, dll.

Buat ModuleScript baru di dalam ReplicatedStorage.
Ganti nama skrip baru menjadi AnimateUI.

Tempelkan kode berikut ke dalam skrip:

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

	-- Terjemahkan teks jika memungkinkan
	if translator then
		displayText = translator:Translate(guiObject, text)
	end

	-- Ganti tag pemisah baris sehingga loop grapheme tidak akan melewatkan karakter tersebut
	displayText = displayText:gsub("<br%s*/>", "\n")
 	-- Hapus tag RichText karena animasi karakter-per-karakter akan merusak tag
	displayText = displayText:gsub("<[^<>]->", "")

	-- Atur teks yang diterjemahkan/dimodifikasi pada induk
	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

Jika bahasa sumber permainan Anda bukan bahasa Inggris ("en"), ubah kode lokal untuk SOURCE_LOCALE agar sesuai dengan bahasa sumber dalam pengaturan lokalisasi.

Buat TextLabel di lokasi yang sesuai, seperti di dalam ScreenGui yang diparent ke StarterGui.

Sisipkan LocalScript baru sebagai anak langsung dari label dan tempelkan kode berikut. Perhatikan bahwa setiap pesan dikeluarkan dengan memanggil AnimateUI.typeWrite() dengan parameter untuk objek induk, string yang akan dikeluarkan, dan jeda antara karakter.

LocalScript

local ReplicatedStorage = game:GetService("ReplicatedStorage")

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

local label = script.Parent

-- Muat penerjemah jika permainan dilokalisasi
--AnimateUI.loadTranslator()

local message1 = [[Di balik pintu ini adalah<br /><font size="46" color="rgb(255,50,25)">Zorgoth Agung...</font> <font size="40">🗡</font>]]
AnimateUI.typeWrite(label, message1, 0.05)

task.wait(1)

local message2 = [[...yang menguasai dungeon ini <font color="rgb(255,200,50)">tanpa tantangan!</font> <font size="30">😈</font>]]
AnimateUI.typeWrite(label, message2, 0.05)