Kullanıcı Arayüzü / Gençler

animasyon, tweening seri olarak iki anahtar noktası arasındaki orta kareleri oluşturma işlemidir. Bir kullanıcı arayüzü tasarlarken, tweening'i kullanarak bir GuiObject'i diğerine kolayca geçiştirebilirsiniz, örneğin:

• Bir kullanıcı seçtiğinde düğmenin boyutunu düzgün artırır.
• Ekran kenarlarından gelen ve giden kayar menüleri.
• Bir kullanıcı sağlık takviyesi aldığında iki genişliği arasında bir sağlık barı yavaş yavaş animasyon.

Tek Özellikli Onlar

Pozisyon

Bir Class.GuiObject 'in pozisyonunu ayarlamak için:

1. Eşdeğer nesne için AnchorPoint ı ayarla.
2. Etkili UDim2 koordinatlarını belirleyin, eğilme parametrelerini kullanarak UDim2'nın hedef pozisyonunu hedeflemek yerine, objenin ekranın doğusundaki aynen merkezine tweens.
3. Bir TweenInfo ve hedef pozisyonunu TweenService:Create()'e geçirin.
4. Oyunu Tween:Play() ile oyna.

Aşağıdaki kod parçası bir ImageLabel içinde bir ScreenGui ın merkezine taşır:

Arayüz Görünümü - 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

Class.GuiObject 'in boyutunu GuiObject :

1. Etkiliyon büyüklüğü için hedef büyüklüğü için UDim2 koordinatlarını belirleyin, Datatype.UDim2'nın UDim2 parametrelerini kullanarak ekran büyüklüğünün% ile ilgili bir yüzdeki ekran büyüklüğüne tweens'ın.
2. Tasarımınızı değiştirirken tasarımınızı korumak için bir UIAspectRatioConstraint eklentekine bağlayın.
3. Bir TweenInfo ve hedef büyüklüğünü TweenService:Create() ile geçer.
4. Oyunu Tween:Play() ile oyna.

Aşağıdaki kod öğesi bir ImageLabel içinde bir ScreenGui ile 40% ekran genişliği veya yüksekliğine (herhangi biri daha küçük) objenin merkez bağlantı noktasından 40%'e kadar ekran genişliğine ve yüksekliğine skalar:

Kullanıcı Arayüzü - Boyutlandırma
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öndürme

Bir GuiObject 'in dönüşünü ikiye katlamak için:

1. Nesnelerin etrafında döndüğü için AnchorPoint belirleyin.
2. Nesne için hedefi belirleyin Rotation
3. Bir TweenInfo ve hedef dönüşümünü TweenService:Create() ile geçer.
4. Oyunu Tween:Play() ile oyna.

Kullanıcı Arayüzü - Boyutlandırma
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

Çok sayıda özellik kontrolü UI gizliliğini, nesne yazbağlı olarak, kontrol eder. Bunların her birini tek tek tek tek bir özellik olarak veya bir 多-özellik tween aracılığıyla bir grup içine yerleştirerek grubun genel gizliliğini tween edebilirsiniz. Alternatif olar

Kullanıcı Arayüzü - Görüntü Saydamlığı
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()

Kullanıcı Arayüzü - Canvas Gruplaştırma
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

Öğe yazbağlı olarak UI renk kontrolü, kat sayıda öğe kontrolü için renk gösterir. Bu öğeleri her biri tek tek tek tek bir renk gösterir veya bir grup içinde bir renk grubu oluşturarak grup genel renklerini tween. Alternatif olarak, bir grup içindeki her bir renk grubunu tween veya kat sayıda öğ

Kullanıcı Arayüzü - Görüntü 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()

Kullanıcı Arayüzü - Canvas Grup 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()

Çizgi

Çok sayıda özellik kontrolü UI sınırlarını, nesne yazbağlı olarak kontrol eder.

Alternatif olarak, bir UIStroke çocuğunu uygulayabilir ve onun genişliğini, rengini ve/veya şeffaflığını değiştirebilirsiniz.

Kullanıcı Arayüzü - UIStroke Rengi ve 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()

Çok Özellikli Gençler

Aşağıdaki tüm özellikli gençler içinden herhangi birini TweenService:Create() ile daha karmaşık gençlerle birleştirebilirsiniz, örneğin pozisyon + dönüşüm veya 2>büyüklük + şeffaflık2> .

Kullanıcı Arayüzü - Konum ve 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()

Kullanıcı Arayüzü - Boyutlandırma & Saydamlı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 Kısayolları

Önceki tween'in Completed etkinliğinde oynayarak birbirine seri olarak UI animasyonlarını oluşturabilirsiniz. Örneğin, aşağıdaki kod, bir nesneyi ekranın merkezine hareket ettirir ve döndürür.

Kullanıcı Arayüzü 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})

-- İlk olarak pozisyon tween oynat
positionTween:Play()

-- Position tween'ı tamamladıktan sonra yön dönüşümünü oynat
positionTween.Completed:Connect(function()
	rotationTween:Play()
end)

Zorluk Seçenekleri

Datatype.TweenInfo 'in kolaylaştırma seçeneklerini kullanarak, UI animasyonlarının kolaylaştırma stilini ve yönünü kontrol edebilirsiniz.

Görünüm

Enum.EasingStyle değerlerini başlangıç ​​ve bitirarasındaki yüzdesi ayarlar.Varsayılan olarak, kolaylık stilinin değeri Enum.EasingStyle.Quad dir.

Sakinleştirme Tarzı - Kübik
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic)
local tween = TweenService:Create(object, tweenInfo, {Rotation = 45})

Yön

Enum.EasingDirection şekilsel bir önbelleğin nasıl uygulandığını tanımlar, bir nesneye uygulanan kolaylaştırma tarzı ile bir değer, bir Out değeri olarak varsayılır. Lineer kolaylaştırma tarzının değeri değiştirilemez, çünkü değer bitir​​

Yön Kolaylaştırma - InOut
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic, Enum.EasingDirection.InOut)
local tween = TweenService:Create(object, tweenInfo, {Rotation = 45})

Animasyonlu Yazı

Animasyon efektleri kullanarak keskin bölümlü afişler, oyuncu talimatları ve davet ekranları gibi metin tabanlı UI'yi kolayca geliştirebilirsiniz.

Yazıtipi Efekti

“Yazıtipi” etkisi, bir hikaye, çıktı NPC konuşmaları vb. gibi şeyler anlatan TextLabels için idealdir.

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

2. Yeni AnimateUI adlı kısmı yeniden adlandır.

   

3. Aşağıdaki kodu kodunuza yapıştırın:

   ModülScript - Animasyon Arayüzü
   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 çeviri
   	if translator then
   		displayText = translator:Translate(guiObject, text)
   	end
   
   	-- Grapheme çizgisi bozukluk etiketlerini değiştirir, böylece bu karakterleri kaçırmaz
   	displayText = displayText:gsub("<br%s*/>", "\n")
    	-- Char-by-char animasyonunun etiketlerini kırdığından dolayı zengin metin etiketlerini kaldır
   	displayText = displayText:gsub("<[^<>]->", "")
   
   	-- Ebeveyn üzerinde çevirilen/değiştirilen yazıyı 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

   Deneyiminizin kaynağı İngilizce değilse, yerel dil kodunu "en" değiştirin, böylece kaynağı yerel dil ayarlarıyla eşleştirin.

4. Uygun bir yerde bir TextLabel oluşturun, ScreenGui ebeveyni içindeki bir StarterGui içine.

5. Etikete doğrudan bir çocuk olarak yeni bir LocalScript girin ve aşağıdaki kodda yapıştırın. Etiketin her mesajı, aşağıdaki kodda AnimateUI.typeWrite() ile bir parametre için ekran görüntüsü alır ve arasındaki geçici süre için bir gecikme.

   Yerel Kod
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   local AnimateUI = require(ReplicatedStorage:WaitForChild("AnimateUI"))
   
   local label = script.Parent
   
   -- Oyun yerelleştirilmişse çeviri yükle
   --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)