Kreator

Animasi UI/tweens

*Konten ini diterjemahkan menggunakan AI (Beta) dan mungkin mengandung kesalahan. Untuk melihat halaman ini dalam bahasa Inggris, klik di sini.

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

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

Tween satu properti

Posisi

Untuk tween posisi dari GuiObject:

  1. Setel AnchorPoint untuk objek.
  2. Tentukan koordinat UDim2 untuk posisi target objek, menggunakan parameter scale dari UDim2 daripada nilai pixel yang tepat sehingga objek tween ke pusat layar yang tepat.
  3. Lewati TweenInfo dan posisi target ke TweenService:Create().
  4. Putar tween dengan Tween:Play().

Cuplikan 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:

  1. Tentukan koordinat UDim2 untuk ukuran target objek, menggunakan parameter scale dari UDim2 daripada nilai pixel yang tepat sehingga objek tween ke persentase relatif dari ukuran layar.
  2. Lampirkan UIAspectRatioConstraint ke objek untuk mempertahankan rasio aspek yang dirancang saat tweening.
  3. Lewati TweenInfo dan ukuran target ke TweenService:Create().
  4. Putar tween dengan Tween:Play().

Cuplikan kode berikut menskalakan 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:

  1. Setel AnchorPoint untuk objek yang ingin diputar.
  2. Tentukan target Rotation untuk objek.
  3. Lewati TweenInfo dan rotasi target ke TweenService:Create().
  4. 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 dari properti ini secara individual 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 UIProperti
FrameBackgroundTransparency
TextLabelBackgroundTransparency, TextTransparency, TextStrokeTransparency
TextButtonBackgroundTransparency, TextTransparency, TextStrokeTransparency
ImageLabelBackgroundTransparency, ImageTransparency
ImageButtonBackgroundTransparency, ImageTransparency
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 dari properti ini secara individual atau digabungkan melalui multi-property tween. Sebagai alternatif, Anda dapat tween warna keseluruhan objek dengan menempatkannya di dalam CanvasGroup dan tween grup GroupColor3.

Objek UIProperti
FrameBackgroundColor3, BorderColor3
TextLabelBackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
TextButtonBackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
ImageLabelBackgroundColor3, BorderColor3, ImageColor3
ImageButtonBackgroundColor3, BorderColor3, ImageColor3
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 UIProperti
FrameBorderSizePixel, BorderColor3
TextLabelBorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
TextButtonBorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
ImageLabelBorderSizePixel, BorderColor3
ImageButtonBorderSizePixel, BorderColor3

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

Objek UIProperti
UIStrokeColor, 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 properti multi

Anda dapat menggabungkan salah satu dari tween satu properti menjadi tween yang lebih kompleks dengan melewatkan 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 mengaitkan animasi UI untuk terjadi satu setelah yang lain dengan memutar tween berikutnya setelah event Completed tween sebelumnya. Misalnya, skrip berikut memindahkan objek ke pusat layar, kemudian memutarnya 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 selesai tween posisi

positionTween.Completed:Connect(function()

	rotationTween:Play()

end)

Transisi gaya

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

Aturan status akhir yang dihias di Editor Gaya.

Opsi easing

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.

GayaDeskripsi
LinearBerkelajuan konstan.
SineKecepatan ditentukan oleh gelombang sinus untuk gerakan easing yang lembut.
QuadMirip dengan Sine tetapi dengan kurva yang sedikit lebih tajam berdasarkan interpolasi kuadratik.
CubicMirip dengan Quad tetapi dengan kurva yang sedikit lebih tajam berdasarkan interpolasi kubik.
QuartMirip dengan Cubic tetapi dengan kurva yang jauh lebih tajam berdasarkan interpolasi kuartik.
QuintMirip dengan Quart tetapi dengan kurva yang lebih tajam berdasarkan interpolasi quintik.
ExponentialKurva paling tajam berdasarkan interpolasi eksponensial.
CircularMengikuti busur melingkar, sehingga percepatan lebih mendadak dan perlambatan lebih gradual dibandingkan dengan Quint atau Exponential.
BackSedikit melebihi target, lalu kembali ke tempat.
BounceMembanting ke belakang beberapa kali setelah mencapai target, sebelum akhirnya menetap.
ElasticBerkelajuan seolah terikat pada karet, melebihi target beberapa kali.
Grafik variasi EasingStyle dengan EasingDirection 'In'. 
Easing Style - Kubik
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 adalah konstan dari awal hingga akhir.

ArahDeskripsi
InGaya easing diterapkan ke arah maju.
OutGaya easing diterapkan ke arah mundur.
InOutGaya 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, output percakapan NPC, dan lainnya.

  1. Buat ModuleScript baru dalam ReplicatedStorage.

  2. Ubah nama skrip baru menjadi AnimateUI.

  3. 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 mungkin

    	if translator then

    		displayText = translator:Translate(guiObject, text)

    	end

    

    	-- Ganti tag pemisah baris agar loop grapheme tidak melewatkan karakter tersebut

    	displayText = displayText:gsub("<br%s*/>", "\n")

     	-- Hapus tag RichText karena animasi karakter per karakter akan merusak tag

    	displayText = displayText:gsub("<[^<>]->", "")

    

    	-- Set teks yang diterjemahkan/dimodifikasi ke 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

  4. Buat TextLabel di lokasi yang sesuai, seperti dalam ScreenGui yang dipasang pada StarterGui.

  5. Masukkan LocalScript baru sebagai anak langsung dari label dan tempelkan kode berikut. Perhatikan bahwa setiap pesan di-output dengan memanggil AnimateUI.typeWrite() dengan parameter untuk objek induk, string yang akan di-output, dan jeda antar karakter.

    LocalScript
    local ReplicatedStorage = game:GetService("ReplicatedStorage")

    

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

    

    local label = script.Parent

    

    -- Muat penerjemah jika pengalaman 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 = [[...siapa yang memerintah dungeon ini <font color="rgb(255,200,50)">tanpa tantangan!</font> <font size="30">😈</font>]]

    AnimateUI.typeWrite(label, message2, 0.05)
©2026 Roblox Corporation. Roblox, logo Roblox, dan Powering Imagination termasuk dalam merek dagang kami yang terdaftar dan tidak terdaftar di AS dan negara lainnya.
Ketentuan·Privasi·Aksesibilitas·Dukungan Pelanggan
Bahasa Indonesia