UI animasyonu/tween'ler | Dokümantasyon - Roblox Yaratıcı Merkezi

Animasyonda, tweening, bir dizideki iki ana nokta arasında ara kareler oluşturma sürecidir. Bir kullanıcı arayüzü tasarlarken, tweening'i bir GuiObject'ı bir durumdan diğerine sorunsuz bir şekilde geçiş yapmak için kullanabilirsiniz, örneğin:

Bir kullanıcı bir butonu seçtiğinde butonun boyutunu yumuşak bir şekilde artırmak.
UI menülerini ekran kenarlarından içeri ve dışarı kaydırmak.
Bir kullanıcı sağlık artırımı aldığında bir sağlık çubuğunu iki genişlik arasında kademeli olarak animasyon yapmak.

Tek özellikli tween'ler

Konum

Bir GuiObject'ın konumunu tweenlemek için:

Nesne için AnchorPoint'ı ayarlayın.
Nesnenin hedef konumu için UDim2 koordinatlarını belirleyin, böylece nesne ekranın tam ortasına tweenlenir.
TweenInfo ve hedef konumu TweenService:Create()'e geçirin.
Tween'i Tween:Play() ile oynatın.

Aşağıdaki kod parçası, bir ImageLabel'ı bir ScreenGui içinde ekranın tam ortasına taşır:

UI Tween - Konum

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

Boyut

Bir GuiObject'ın boyutunu tweenlemek için:

Nesnenin hedef boyutu için UDim2 koordinatlarını belirleyin, böylece nesne ekran boyutunun göreceli bir yüzdesine tweenlenir.
Tweenleme sırasında tasarlanan en boy oranını korumak için nesneye bir UIAspectRatioConstraint ekleyin.
TweenInfo ve hedef boyutu TweenService:Create()'e geçirin.
Tween'i Tween:Play() ile oynatın.

Aşağıdaki kod parçası, bir ImageLabel'ı bir ScreenGui içinde ekran genişliğinin veya yüksekliğinin (hangisi daha küçükse) %40'ına nesnenin merkez noktasından ölçeklendirir:

UI Tween - Boyut

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

Dönme

Bir GuiObject'ın dönmesini tweenlemek için:

Dönme etrafında dönecek nesne için AnchorPoint'ı ayarlayın.
Nesne için hedef Rotation'ı belirleyin.
TweenInfo ve hedef dönüşü TweenService:Create()'e geçirin.
Tween'i Tween:Play() ile oynatın.

UI Tween - Dönme

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

Şeffaflık

Birden fazla özellik, nesne türüne bağlı olarak UI şeffaflığını kontrol eder. Bu özelliklerin her birini ayrı ayrı veya bir çoklu özellik tween'i aracılığıyla birleştirerek tweenleyebilirsiniz. Alternatif olarak, bir nesnenin genel şeffaflığını CanvasGroup içine yerleştirerek ve grubun GroupTransparency'sini tweenleyerek tweenleyebilirsiniz.

UI Nesnesi	Özellikler
Frame	BackgroundTransparency
TextLabel	BackgroundTransparency, TextTransparency, TextStrokeTransparency
TextButton	BackgroundTransparency, TextTransparency, TextStrokeTransparency
ImageLabel	BackgroundTransparency, ImageTransparency
ImageButton	BackgroundTransparency, ImageTransparency

TextLabel.TextStrokeTransparency ve TextButton.TextStrokeTransparency için modern bir alternatif olarak, bir UIStroke nesnesinde stroke şeffaflığını tweenleyebilirsiniz, bu Stroke bölümünde açıklandığı gibi.

UI Tween - Resim Şeffaflığı

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 - Canvas Grubu Şeffaflığı

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

Renk

Birden fazla özellik, nesne türüne bağlı olarak UI rengini kontrol eder. Bu özelliklerin her birini ayrı ayrı veya bir çoklu özellik tween'i aracılığıyla birleştirerek tweenleyebilirsiniz. Alternatif olarak, bir nesnenin genel rengini CanvasGroup içine yerleştirerek ve grubun GroupColor3'sini tweenleyerek tweenleyebilirsiniz.

UI Nesnesi	Özellikler
Frame	BackgroundColor3, BorderColor3
TextLabel	BackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
TextButton	BackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
ImageLabel	BackgroundColor3, BorderColor3, ImageColor3
ImageButton	BackgroundColor3, BorderColor3, ImageColor3

GuiObject.BorderColor3, TextLabel.TextStrokeColor3 ve TextButton.TextStrokeColor3 için modern bir alternatif olarak, bir UIStroke nesnesinde stroke rengini tweenleyebilirsiniz, bu Stroke bölümünde açıklandığı gibi.

UI Tween - Resim Rengi

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 - Canvas Grubu Rengi

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

Birden fazla özellik, nesne türüne bağlı olarak UI kenarlarını kontrol eder.

UI nesnesi	Özellikler
Frame	BorderSizePixel, BorderColor3
TextLabel	BorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
TextButton	BorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
ImageLabel	BorderSizePixel, BorderColor3
ImageButton	BorderSizePixel, BorderColor3

Alternatif olarak, bir UIStroke çocuğu uygulayabilir ve kalınlığını, rengini ve/veya şeffaflığını tweenleyebilirsiniz.

UI Nesnesi	Özellikler
UIStroke	Color, Thickness, Transparency

UI Tween - UIStroke Rengi & Kalınlığı

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

Çoklu özellik tween'leri

Herhangi bir tek özellik tween'ini daha karmaşık tween'ler haline getirmek için TweenService:Create()'e birden fazla hedef özelliği geçerek birleştirebilirsiniz, örneğin konum + dönme veya boyut + şeffaflık.

UI Tween - Konum & Dönme

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 - Boyut & Şeffaflık

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

Tween dizileri

UI animasyonlarını birbiri ardına gerçekleşecek şekilde zincirleyebilirsiniz; önceki tween'in Completed olayına bağlı olarak sonraki tween'leri oynatabilirsiniz. Örneğin, aşağıdaki script bir nesneyi ekranın ortasına taşır, ardından 45° döndürür.

UI Tween Dizisi

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

-- İlk olarak konum tween'ini oynat
positionTween:Play()

-- Konum tween'i tamamlandığında dönüş tween'ini oynat
positionTween.Completed:Connect(function()
	rotationTween:Play()
end)

Stil geçişleri

UI nesneleri, bir veya daha fazla UI özelliğinin StyleRule tanımları aracılığıyla tweenlendiği stil geçişleri ile de animasyonlanabilir. Ayrıntılar için Stil Editörü kılavuzuna bakın.

Stil Editöründeki son stil durumu kuralı.

Easing seçenekleri

TweenInfo'nun easing seçeneklerini kullanarak, UI animasyonlarının easing stili ve yönünü kontrol edebilirsiniz.

Stil

Enum.EasingStyle, başlangıçtan sona kadar olan interpolasyon oranını ayarlar. Varsayılan olarak, easing stili Enum.EasingStyle.Quad olarak ayarlanmıştır.

Stil	Açıklama
Doğrusal	Sabit bir hızda hareket eder.
Sinüs	Hafif bir easing hareketi için hız bir sinüs dalgası ile belirlenir.
Dörtgen	Sinüs'e benzer, ancak daha keskin bir eğri ile, ikinci dereceden interpolasyona dayanır.
Küpkü	Dörtgen'e benzer, ancak daha keskin bir eğri ile, üçüncü dereceden interpolasyona dayanır.
Dördüncü	Küpkü'ye benzer, ancak daha keskin bir eğri ile, dördüncü dereceden interpolasyona dayanır.
Beşinci	Dördüncü'ye benzer, ancak daha keskin bir eğri ile, beşinci dereceden interpolasyona dayanır.
Üssel	Üssel interpolasyona dayanan en keskin eğri.
Dairesel	Bir dairesel yay izler, böylece hızlanma daha ani ve yavaşlama daha yavaş olur, Beşinci veya Üssel'e göre.
Geri	Hedefi hafifçe aşar, ardından yerine geri döner.
Sıçrama	Hedefe ulaştıktan sonra geri sıçrar, ardından nihayetinde yerleşir.
Esnek	Bir lastik bandına bağlıymış gibi hareket eder, hedefi birkaç kez aşar.

İçeri EasingDirection ile EasingStyle varyasyonlarının grafikleri.

Easing Stili - Küpkü

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

Yön

Enum.EasingDirection, easing stilinin bir nesneye nasıl uygulanacağını tanımlar, varsayılan olarak Dışarı'dır. Doğrusal easing stiline sahip bir tween'in etkilenmediğini unutmayın, çünkü doğrusal interpolasyon başlangıçtan sona kadar sabittir.

Yön	Açıklama
İçeri	Easing stili ileri yönde uygulanır.
Dışarı	Easing stili ters yönde uygulanır.
İçeriDışarı	Easing stili ilk yarıda ileri, ikinci yarıda ters yönde uygulanır.

Easing yönü - İçeriDışarı

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

Yazı tipi efekti

Metin tabanlı UI'yi, kesit banner'ları, oyuncu talimatları ve istemler gibi, animasyonlu efektlerle kolayca geliştirebilirsiniz. "Yazı tipi" efekti, bir hikaye anlatan, NPC diyaloglarını veren vb. TextLabel'lar için idealdir.

ReplicatedStorage içinde yeni bir ModuleScript oluşturun.
Yeni script'i AnimateUI olarak yeniden adlandırın.

Aşağıdaki kodu script'e yapıştırın:

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

	-- Mümkünse metni çevir
	if translator then
		displayText = translator:Translate(guiObject, text)
	end

	-- Graphem döngüsünün bu karakterleri atlamaması için satır sonu etiketlerini değiştir
	displayText = displayText:gsub("<br%s*/>", "\n")
 	-- Karakter karakter animasyonunun etiketleri bozmasını önlemek için RichText etiketlerini kaldır
	displayText = displayText:gsub("<[^<>]->", "")

	-- Çevirilmiş/değiştirilmiş metni ebeveyne ayarla
	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

Eğer oyununuzun kaynak dili İngilizce değilse ("en"), SOURCE_LOCALE için yerel kodu, yerelleştirme ayarları ile eşleşecek şekilde değiştirin.

Uygun bir konumda, örneğin StarterGui'ya bağlı bir ScreenGui içinde bir TextLabel oluşturun.

Etiketin doğrudan çocuğu olarak yeni bir LocalScript ekleyin ve aşağıdaki kodu yapıştırın. Her mesaj, ebeveyn nesne, çıktı verilecek dize ve karakterler arasındaki gecikme için parametrelerle AnimateUI.typeWrite() çağrılarak çıktı verilir.

LocalScript

local ReplicatedStorage = game:GetService("ReplicatedStorage")

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

local label = script.Parent

-- Oyun yerelleştirilmişse çevirmeni yükle
--AnimateUI.loadTranslator()

local message1 = [[Bu kapının ötesinde<br /><font size="46" color="rgb(255,50,25)">Büyük Zorgoth...</font> <font size="40">🗡</font>]]
AnimateUI.typeWrite(label, message1, 0.05)

task.wait(1)

local message2 = [[...bu zindanı <font color="rgb(255,200,50)">karşısında hiç kimse olmadan</font> <font size="30">😈</font> yönetiyor!]]
AnimateUI.typeWrite(label, message2, 0.05)