Animasi UI/remaja

Dalam animasi, tweening adalah proses menghasilkan frame intermedi antara dua titik kunci dalam urutan.Saat merancang antarmuka pengguna, Anda dapat menggunakan tweening untuk melakukan transisi dari satu keadaan ke keadaan lain dengan lancar, seperti:

• Meningkatkan ukuran tombol secara halus saat pengguna memilihnya.
• Menu UI geser masuk dan keluar dari ujung layar.
• Secara bertahap menganimasikan bilah kesehatan di antara dua lebar saat pengguna menerima dorongan kesehatan.

Tween tunggal-properti

Posisi

Untuk menggeser posisi dari GuiObject :

1. Tetapkan AnchorPoint untuk objek.
2. Tentukan UDim2 koordinat untuk posisi target objek, menggunakan parameter skala dari UDim2 alih-alih nilai piksel yang tepat sehingga remaja objek berada di pusat tepat layar.
3. Lewati TweenInfo dan posisi target ke TweenService:Create().
4. Mainkan remaja dengan Tween:Play() .

Potongan kode berikut memindahkan ImageLabel di dalam ScreenGui ke pusat tepat 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 membagi ukuran dari sebuah GuiObject :

1. Tentukan UDim2 koordinat untuk ukuran target objek, menggunakan parameter skala dari UDim2 alih-alih nilai piksel yang tepat sehingga remaja objek menjadi persentase relatif dari ukuran layar.
2. Lampirkan UIAspectRatioConstraint pada objek untuk mempertahankan rasio aspek yang dirancang saat tweening.
3. Lewati TweenInfo dan ukuran target ke TweenService:Create().
4. Mainkan remaja dengan Tween:Play() .

Potongan kode berikut membesarkan ImageLabel dalam ScreenGui ke 40% lebar atau ketinggian layar (yang mana yang lebih kecil) dari titik sudut 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 menggeser rotasi dari sebuah GuiObject :

1. Tetapkan AnchorPoint untuk objek untuk berputar di sekitarnya.
2. Tentukan target Rotation untuk objek.
3. Lewati TweenInfo dan rotasi target ke TweenService:Create().
4. Mainkan remaja 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 ketikobjek.Anda dapat memeriksa masing-masing properti ini secara individual atau kombinasi melalui tween multi-properti.Alternatifnya, Anda dapat menyamarkan transparansi keseluruhan objek dengan menempatkannya di dalam CanvasGroup dan menyamarkan grupGroupTransparency .

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 ketikobjek.Anda dapat memeriksa masing-masing properti ini secara individual atau kombinasi melalui tween multi-properti.Alternatifnya, Anda dapat menyelaraskan warna keseluruhan objek dengan menempatkannya di dalam CanvasGroup dan menyelaraskan grupGroupColor3 .

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

Serangan

Beberapa properti mengontrol batas UI, tergantung pada ketikobjek.

Alternatifnya, Anda dapat menerapkan anak dan remaja UIStroke dan mengubah tebal, warna, dan/atau transparansinya.

UI Tween - Warna dan Ketebalan Stroke 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("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()

Anak remaja multi-properti

Anda dapat menggabungkan salah satu dari tweens properti tunggal ke tweens yang lebih kompleks dengan melewati 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()

Sequensi Tween

Anda dapat menggabungkan animasi UI untuk terjadi satu demi satu dengan memainkan remaja berikutnya setelah remaja sebelumnya Completed peristiwa.Sebagai contoh, skrip berikut memindahkan objek ke tengah layar, lalu memutarnya sebesar 45°.

Sequensi 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 positionTween = TweenService:Create(object, tweenInfo, {Position = targetPosition})
local rotationTween = TweenService:Create(object, tweenInfo, {Rotation = targetRotation})

-- Awalnya mainkan posisi tween
positionTween:Play()

-- Mainkan putaran tween saat posisi tween selesai
positionTween.Completed:Connect(function()
	rotationTween:Play()
end)

Mempermudah pilihan

Menggunakan opsi penghilangan ketegangan dari , Anda dapat mengontrol penghilangan gaya dan arah animasi UI.

Bergaya

Enum.EasingStyle menetapkan tingkat interpolasi dari awal sampai akhiri. Secara default, gaya meringankan diatur ke Enum.EasingStyle.Quad .

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

Pengarahan

Enum.EasingDirection mendefinisikan bagaimana interpolasi gaya meringankan berlaku pada objek, dengan default Keluar .Perhatikan bahwa seorang remaja dengan gaya penyederhanaan Linier tidak terpengaruh, karena interpolasi linier konstan dari awal sampai 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 berbasis teks, seperti iklan cutscene, instruksi pemain, dan perintah, dengan efek animasi.

Efek mesin ketik

Efek "mesin ketik" ideal untuk TextLabels yang memberi tahu sebuah cerita, output percakapan NPC, dll

1. Buat baru ModuleScript dalam ReplicatedStorage .

2. Ganti nama skrip baru 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 pemutus baris sehingga loop grafem tidak akan melewatkan karakter-karakter itu
   	displayText = displayText:gsub("<br%s*/>", "\n")
    	-- Hapus tag RichText karena animasi char-by-char akan memecahkan 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 tidak bahasa Inggris, ubah kode lokal untuk untuk sesuai dengan bahasa sumber dalam pengaturan lokalisasi.

4. Buat TextLabel di lokasi yang sesuai, seperti di dalam ScreenGui orang tua ke StarterGui .

5. Sisipkan anak baru LocalScript sebagai anak langsung dari label dan tempelkan kode berikut.Perhatikan bahwa setiap pesan dihasilkan dengan memanggil AnimateUI.typeWrite() dengan parameter untuk objek orang tua, string untuk dihasilkan, dan penundaan antara karakter.

   Skrip Lokal
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   local AnimateUI = require(ReplicatedStorage:WaitForChild("AnimateUI"))
   
   local label = script.Parent
   
   -- Load terjemahan jika game diterjemahkan lokal
   --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)