Animasi UI/Tweens

Dalam animasi, tweening adalah proses menghasilkan frame antara dua poin kunci dalam urutan. Saat mendesain antarmuka pengguna, Anda dapat menggunakan tweening untuk menyambungkan GuiObject dengan mudah dari satu state ke another, seperti:

• Meningkatkan ukuran tombol secara halus saat seorang pengguna menyeleksinya.
• Menu UI geser di dan dari sudut layar.
• Secara bertahap menganimasikan bar kesehatan di antara dua lebar saat pengguna menerima peningkatan kesehatan.

Tweens Satu-Properti

Posisi

Untuk menyempurnakan posisi dari Class.GuiObject :

1. Tetapkan AnchorPoint untuk objek.
2. Tentukan koordinat UDim2 untuk posisi target objek, menggunakan parameter skala Datatype.UDim2 sebagai gantinya dari nilai pixel yang tepat sehingga objek tweens ke tengah layar yang tepat.
3. Selalu melewati TweenInfo dan posisi target ke TweenService:Create() .
4. Mainkan tween dengan Tween:Play() .

Berikut adalah snippet kode untuk menempatkan ImageLabel dalam ScreenGui ke tepat tengah layar:

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 menyesuaikan ukuran dari GuiObject :

1. Tentukan UDim2 koordinat untuk ukuran target objek, menggunakan skala parameter dari UDim2 alih-alih nilai pixel yang tepat sehingga objek tweens ke persentase relatif dari ukuran layar.
2. Tambahkan UIAspectRatioConstraint ke objek untuk menjaga aspek rasio desain saat tweening.
3. Selalu melewati TweenInfo dan ukuran target ke TweenService:Create() .
4. Mainkan tween dengan Tween:Play() .

Potongan kode berikut menyesuaikan Class.ImageLabel dalam Class.ScreenGui untuk 40% dari lebar atau ketinggian layar (tergantung pada yang lebih kecil) dari titik 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 menyempurnakan rotasi dari GuiObject :

1. Tetapkan AnchorPoint untuk objek untuk berputar.
2. Tentukan target Rotation untuk objek.
3. Selalu melewati TweenInfo dan rotasi target ke TweenService:Create() .
4. Mainkan 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

Sebagai UI kontrol propinsi, tergantung pada ketikobjek. Anda dapat menyesuaikan transparansi UI propinsi melalui UI multi-property tween. Alternatifnya, Anda dapat menyesuaikan transparansi objek secara keseluruhan dengan menempatkannya di dalam Class.CanvasGroup dan menyesuaikan grupnya Class.CanvasGroup.GroupTransparency|GroupTransparency .

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

Banyaknya warna UI kontrol properti, tergantung pada ketikobjek. Anda dapat menyesuaikan warna UI masing-masing dari setiap properti ini secara individual atau melalui tumpukan multi-property tween. Selain itu, Anda dapat menyesuaikan warna objek secara keseluruhan dengan menempatkan di dalam CanvasGroup dan menggabungkan grup

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

Menus

UI kontrol banyak properti, tergantung pada ketikobjek.

Alternatifnya, Anda dapat menerapkan anak UIStroke dan menyempurnakan ketebuhan, warna, dan/atau transparansinya.

UI Tween - UIStroke Warna & Kerukung
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()

Rumah Tangga Multi-Properti

Anda dapat menggabungkan salah satu dari tunggal-properti tweens ke dalam tweens yang lebih kompleks dengan menyebarkan banyak property target ke TweenService:Create(), misalnya posisi + rotasi atau 1>ukuran + transparansi1>.

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

Menggabungkan Pola

Anda dapat mengikat animasi UI untuk terjadi satu setelah yang lain dengan bermain tweens berikutnya di acara Completed sebelumnya. Misalnya, script berikutnya pindahkan objek ke tengah layar, lalu 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 bermain posisi tween
positionTween:Play()

-- Mainkan persyaratan rotasi pada saat penyelesaian posisi tween
positionTween.Completed:Connect(function()
	rotationTween:Play()
end)

Opsi Meredakan

Menggunakan opsi pemudaran dari TweenInfo, Anda dapat mengontrol gaya pemudaran style dan arah dari animasi UI.

Gaya

Enum.EasingStyle tetapkan tingkat interplantasi dari awal hingga akhiri. Secara default, gaya mudah ditetapkan ke Enum.EasingStyle.Quad .

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

Arah

Enum.EasingDirection mendefinisikan cara penerapan gaya mudah berlaku pada objek, dengan default Keluar . Perhatikan bahwa tween dengan gaya 0>Linear0> tidak terpengaruh, karena tween dengan gaya Enum.EasingDirection3> tidak berubah saat memulai hingga akhiri.

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

Animasi Teks

Anda dapat dengan mudah meningkatkan UI berdasar teks, seperti spanduk cutscene, instruksi pemain, dan prompt, dengan efek animasi.

Efek Ketik

Efek "pengetik kata" ideal untuk TextLabels yang menceritakan sebuah cerita, mengekspor percakapan NPC, dll.

1. Buat ModuleScript baru di dalam ReplicatedStorage .

2. Ganti nama script baru AnimateUI .

   

3. Tulis kode berikut ke dalam skrip:

   ModuleScript - Animasi UI
   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 tanda pemecahan baris sehingga grafen loop tidak melewatkan karakter-karakter tersebut
   	displayText = displayText:gsub("<br%s*/>", "\n")
    	-- Hapus tag RichText karena animasi char-by-char akan menghancurkan tag
   	displayText = displayText:gsub("<[^<>]->", "")
   
   	-- Tetapkan teks yang diterjemahkan/ dimodifikasi pada orang tua
   	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 pengalaman Anda bukan bahasa Inggris ( "en" ) , ubah kode lokasi untuk "en" untuk mencocokkan bahasa sumber dalam SOURCE_LOCALE .

4. Buat TextLabel di lokasi yang sesuai, seperti dalam ScreenGui orangtua dari StarterGui .

5. Sisipkan LocalScript baru sebagai anak langsung label dan pasa dalam kode berikut. Catat bahwa setiap pesan dihasilkan dengan menelepon AnimateUI.typeWrite() dengan parameter untuk objek utama, string untuk diekspor, dan kesalahan antara karakter.

   Skrip Lokal
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   local AnimateUI = require(ReplicatedStorage:WaitForChild("AnimateUI"))
   
   local label = script.Parent
   
   -- Memuat penerjemah jika game diberlokasi
   --AnimeUI.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)