Yaratıcı

UI animasyonu/çoklu tween'ler

*Bu içerik, yapay zekâ (beta) kullanılarak çevrildi ve hatalar içerebilir. Sayfayı İngilizce görüntülemek için buraya tıkla.

Animasyonda, tweenleme iki anahtar nokta arasındaki ara kareleri oluşturma sürecidir. Bir kullanıcı arayüzü tasarlarken, tweenleme kullanarak bir GuiObject'ı bir durumdan diğerine sorunsuz bir şekilde geçirebilirsiniz; örneğin:

  • Bir kullanıcı butona tıkladığında butonun boyutunu sorunsuz bir şekilde artırmak.
  • UI menülerini ekran kenarlarından içeri ve dışarı kaydırmak.
  • Bir kullanıcı sağlık artırdığında sağlık çubuğunu iki genişlik arasında yavaşça animasyon yapmak.

Tek özellik tweens

Konum

Bir GuiObject'ın konumunu tweenleme için:

  1. Nesne için AnchorPoint'ı ayarlayın.
  2. Nesnenin hedef konumu için UDim2 koordinatlarını belirleyin; nesnenin tam ekran ortasına tweenlemesini sağlamak için UDim2'nin ölçek parametrelerini kesin piksel değerleri yerine kullanın.
  3. TweenInfo ve hedef konumu TweenService:Create()'e geçirin.
  4. Tween'i Tween:Play() ile oynatın.

Aşağıdaki kod örneği, 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 tweenleme için:

  1. Nesnenin hedef boyutu için UDim2 koordinatlarını belirleyin; nesnenin boyutunu ekran boyutunun göreceli bir yüzdesine tweenlemesini sağlamak için UDim2'nin ölçek parametrelerini kesin piksel değerleri yerine kullanın.
  2. Tweenleme sırasında tasarlanan en boy oranını korumak için nesneye bir UIAspectRatioConstraint ekleyin.
  3. TweenInfo ve hedef boyutu TweenService:Create()'e geçirin.
  4. Tween'i Tween:Play() ile oynatın.

Aşağıdaki kod örneği, bir ImageLabel'ı bir ScreenGui içinde ekran genişliğinin veya yüksekliğinin %40'ına (hangisi daha küçükse) nesnenin merkezden üçgenlendirilerek ö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 tweenleme için:

  1. Nesnenin döneceği için AnchorPoint'ı ayarlayın.
  2. Nesne için hedef Rotation değerini belirleyin.
  3. TweenInfo ve hedef rotasyonu TweenService:Create()'e geçirin.
  4. Tween'i Tween:Play() ile oynatın.
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 targetRotation = 45



local tweenInfo = TweenInfo.new(2)

local tween = TweenService:Create(object, tweenInfo, {Rotation = targetRotation})



tween:Play()

Şeffaflık

UI şeffaflığını kontrol eden birden fazla özellik vardır; bu özellikler, nesne türüne bağlı olarak değişir. Bu özelliklerin her birini ayrı ayrı veya çoklu özellik tweens ile birleştirerek tweenleyebilirsiniz. Alternatif olarak, bir nesnenin genel şeffaflığını CanvasGroup içine yerleştirerek ve grubun GroupTransparency değerini tweenleyerek ayarlayabilirsiniz.

UI NesnesiÖzellikler
FrameBackgroundTransparency
TextLabelBackgroundTransparency, TextTransparency, TextStrokeTransparency
TextButtonBackgroundTransparency, TextTransparency, TextStrokeTransparency
ImageLabelBackgroundTransparency, ImageTransparency
ImageButtonBackgroundTransparency, ImageTransparency
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, UI rengini kontrol eder; bu özellikler, nesne türüne bağlı olarak değişir. Bu özelliklerin her birini ayrı ayrı veya çoklu özellik tweens ile birleştirerek tweenleyebilirsiniz. Alternatif olarak, bir nesnenin genel rengini CanvasGroup içine yerleştirerek ve grubun GroupColor3 değerini tweenleyerek ayarlayabilirsiniz.

UI NesnesiÖzellikler
FrameBackgroundColor3, BorderColor3
TextLabelBackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
TextButtonBackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
ImageLabelBackgroundColor3, BorderColor3, ImageColor3
ImageButtonBackgroundColor3, BorderColor3, ImageColor3
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, UI kenarlıklarını kontrol eder; bu özellikler, nesne türüne bağlı olarak değişir.

UI nesnesiÖzellikler
FrameBorderSizePixel, BorderColor3
TextLabelBorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
TextButtonBorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
ImageLabelBorderSizePixel, BorderColor3
ImageButtonBorderSizePixel, BorderColor3

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

UI NesnesiÖzellikler
UIStrokeColor, 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 tweens

Herhangi bir tek özellik tween'i birden fazla hedef özelliği TweenService:Create()'e geçerek daha karmaşık tweenlere 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ı biri diğerinin ardından gelebilecek şekilde birleştirmek için önceki tween'in Completed olayında sonraki tween'leri oynatabilirsiniz. Örneğin, aşağıdaki script bir nesneyi ekranın merkezine taşır ve 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öndürme tween'ini oynat

positionTween.Completed:Connect(function()

	rotationTween:Play()

end)

Stil geçişleri

UI nesneleri ayrıca, StyleRule tanımları aracılığıyla tweenlenerek animasyonlu hale getirilebilir; bu, bir veya birden fazla UI özelliğinin tweenlenmesiyle CSS geçişlerine benzer. Detaylar 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 enterpolasyon oranını belirler. Varsayılan olarak, easing stili Enum.EasingStyle.Quad olarak ayarlanmıştır.

StilAçıklama
DoğrusalSabit bir hızda hareket eder.
SineHafif bir easing hareketi için hız, bir sine dalgası ile belirlenir.
QuadSine'ye benzer ama ikincil olarak daha dik bir eğri ile kare enterpolasyonu temelindedir.
CubicQuad'ya benzer ama daha dik bir eğri ile kübik enterpolasyonu temelindedir.
QuartCubic'e benzer ama daha da dik bir eğri ile dördüncü dereceden enterpolasyonu temelindedir.
QuintQuart'ya benzer ama daha da dik bir eğri ile beşinci dereceden enterpolasyonu temelindedir.
ÜsselEn dik eğri, üssel enterpolasyona dayanır.
DaireselDairesel bir yay takip eder, böylece hızlanma daha ani ve yavaşlama Quint veya Üssel'e göre daha yavaş olur.
GeriHedefi hafifçe aşar, ardından yerine geri gelir.
SıçramaHedefe ulaştıktan sonra geriye doğru birden fazla kez sıçrar, sonunda durur.
ElastikBir lastik ip gibi hareket eder, hedefi birkaç kez aşar.
İçeri EasingDirection ile EasingStyle varyasyonlarının grafikleri. 
Easing Stili - Kübik
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic)

local tween = TweenService:Create(object, tweenInfo, {Rotation = 45})

Yön

Enum.EasingDirection, easing stilinin enterpolasyonunun bir nesneye nasıl uygulandığını tanımlar; varsayılan olarak Dışarı'dır. Unutmayın ki Doğrusal easing stiline sahip bir tween etkilenmez, çünkü doğrusal enterpolasyon başlangıçtan sona sabittir.

YönAçıklama
İçeriEasing stili ileri yönde uygulanır.
DışarıEasing stili ters yönde uygulanır.
İç-Dışİlk yarıda ileri, ikinci yarıda ters yönde uygulanır.
Easing yönü - İç-Dış
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic, Enum.EasingDirection.InOut)

local tween = TweenService:Create(object, tweenInfo, {Rotation = 45})

Yazı tipi etkisi

Metin tabanlı UI'yı, kesit banner'ları, oyuncu talimatları ve istemleri gibi animasyonlu efektlerle kolayca geliştirebilirsiniz. "Yazı tipi" etkisi, bir hikaye anlatan veya NPC konuşmalarını ortaya koyan TextLabel için idealdir.

  1. ReplicatedStorage içinde yeni bir ModuleScript oluşturun.

  2. Yeni script'i AnimateUI olarak yeniden adlandırın.

  3. Script'ye aşağıdaki kodu 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

    

    	-- Grafik döngüsünün bu karakterleri atlamasını önlemek 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

  4. Uygun bir konuma, ScreenGui içine yerleştirilen bir TextLabel oluşturun.

  5. Etiketin doğrudan çocuğu olarak yeni bir LocalScript ekleyin ve aşağıdaki kodu yapıştırın. Her mesajın, ebeveyn nesne, çıktı olarak verilecek dizi ve karakterler arasındaki gecikme için AnimateUI.typeWrite()'i çağırarak oluşturulduğuna dikkat edin.

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

    

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

    

    local label = script.Parent

    

    -- Eğer deneyim yerelleştirilmişse çevirmeni yükle

    --AnimateUI.loadTranslator()

    

    local message1 = [[Bu kapının arkasında<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 kimse olmadan</font> <font size="30">😈</font> yönetiyor!]]

    AnimateUI.typeWrite(label, message2, 0.05)
©2026 Roblox Corporation. Roblox, the Roblox logo and Powering Imagination are among our registered and unregistered trademarks in the U.S. and other countries.
Terms·Privacy·Accessibility·Destek
Türkçe