Arayüz animasyonu/gençler

animasyon, çevirme bir sırada iki anahtar nokta arasında geçici çerçeveler üretme sürecidir.Kullanıcı arayüzü tasarlarken, bir durumdan diğerine sorunsuz bir şekilde geçmek için geçiş yapabilirsiniz: GuiObject gibi:

• Bir kullanıcı bir düğmeyi seçtiğinde düğmenin boyutunu yavaşça arttırma.
• Ekran kenarlarından kayar kullanıcı arayüzü menüleri.
• Bir kullanıcı sağlık takviyesi aldığında, iki genişlik arasında bir sağlık çubuğu yavaş yavaş animasyon yapar.

Tek mülkiyetli gençler

Pozisyon

Bir pozisyonunun GuiObject arasında gezinmesi için:

1. Nesne için AnchorPoint ayarlayın.
2. Nesnenin hedef konumu için UDim2 koordinatlarını belirleyin, ölçek parametlerini kullanarak UDim2 yerine doğru piksel değerleri yerine so that the object tweens to the exact center of the screen.
3. Bir TweenInfo ve hedef konumu TweenService:Create() 'e geçirin.
4. Oyunu ile çal Tween:Play() .

Aşağıdaki kod parçacığı, bir ImageLabel ı ekranın kesin merkezine hareket ettirir: ScreenGui

Arayüz Geçişi - Pozisyon
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 boyutunun boyutunu küçültmek için:

1. Nesnenin hedef boyutu için koordinatlarını belirleyin, ölçek parametlerini kullanarak yerine doğru piksel değerlerinin yüzde bir kısmına nesne tweens, böylece nesne ekran boyutunun nispeten bir yüzdesine ulaşır.
2. Tasarlanan yönlendirme oranını korumak için nesneye UIAspectRatioConstraint ekleyin ve tweening sırasında tasarlanan yönlendirme oranını koruyun.
3. Bir TweenInfo ve hedef boyutu TweenService:Create() 'e geçin.
4. Oyunu ile çal Tween:Play() .

Aşağıdaki kod parçacıkları, nesnenin merkez odak noktasından 40% ekran genişliğinin veya yüksekliğinin içine ölçeklendirir: objenin merkez odak noktasından en küçük olanı:

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öndürme

Bir rotasyonun GuiObject bölmek için:

1. Nesnenin etrafında dönmesi için AnchorPoint ayarlayın.
2. Nesne için hedef Rotation belirleyin.
3. Bir TweenInfo ve hedef dönüşü TweenService:Create() 'e geçirin.
4. Oyunu ile çal Tween:Play() .

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

Birden fazla özellik, nesne yazbağlı olarak arayüz transparansını kontrol eder.Bu özelliklerin her birini ayrı ayrı veya bir çok özellikli geçiş aracılığıyla birleştirerek bir araya getirebilirsiniz.Alternatif olarak, bir nesnenin genel transparansını yerleştirerek CanvasGroup içine yerleştirebilir ve grupGroupTransparency 'unu tweenleyebilirsiniz.

Kullanıcı Arayüzü Geçici - 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()

UI Tween - Kanvas Grubu Saydamlığı
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()

Rengi

Nesne yazbağlı olarak birden fazla özellik kontrol etme arayüz rengi.Bu özelliklerin her birini ayrı ayrı veya bir çok özellikli geçiş aracılığıyla birleştirerek bir araya getirebilirsiniz.Alternatif olarak, bir nesnenin genel rengini yerleştirerek yerleştirebilir ve grupCanvasGroup ve GroupColor3 'unu tweenleyebilirsiniz.

Kullanıcı Arayüzü Geçici - 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ü Geçici - Kanvas 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()

Vuruş

Birden fazla özellik, nesne yazbağlı olarak arayüz sınırlarını kontrol eder.

Alternatif olarak, bir UIStroke çocuk uygulayabilir ve kalınlığını, rengini ve/veya saydamlığını değiştirebilirsiniz.

Kullanıcı Arayüzü Geçici - UIStroke Renk 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

Herhangi bir tek özellikli gençleri çok daha karmaşık gençlere birleştirebilirsiniz, örneğin TweenService:Create() veya boyut + transparans gibi çok sayıda hedef özelliği geçerek boyut + transparans .

Kullanıcı Arayüzü Geçici - Pozisyon ve Dönüş
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ü Geçici - Boyut ve 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()

Gençlik sıraları

Önceki tween'in Completed etkinliğine sonraki gençler oynayarak birbiri ardına gelen UI animasyonları zincirleyebilirsiniz.Örneğin, aşağıdaki kod bir nesneyi ekranın merkezine taşır ve ardından 45° döndürür.

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

-- Başlangıçta konum geçişi oynayın
positionTween:Play()

-- Pozisyon geçişinin bitiminden sonra dönüş oynatma
positionTween.Completed:Connect(function()
	rotationTween:Play()
end)

Hafifletme seçenekleri

TweenInfo 'in rahatlatma seçeneklerini kullanarak, UI animasyonlarının rahatlatma tarzı ve yönü 'u kontrol edebilirsiniz.

Tarz

Enum.EasingStyle baştan bitirinterpolasyon oranını ayarlar. Varsayılan olarak, kolaylaştırma stili Enum.EasingStyle.Quad olarak ayarlanır.

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

Yön

kolaylaştırma stili nasıl bir nesneye uygulanacağını tanımlar, varsayılan olarak Dışarı . Lineer kolaylaştırma stili ile bir gençin etkilenmediğini unutmayın, çünkü lineer yer değiştirme sürekli olarak baştan bitirgeçer.

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

Metni animasyonlaştır

Kesinti reklamları, oyuncu talimatları ve uyarılar gibi metne dayalı UI'leri, animasyonlu efektlerle kolayca geliştirebilirsiniz.

Yazıcı etkisi

Yazıcı efekti, bir hikaye anlatan, NPC konuşmaları gönderen, vb. için idealdir

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

2. Yeni senaryoyu yeniden adlandır AnimateUI .

   

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

   ModülScript - 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
   
   	-- Satır bozma etiketlerini değiştirin, böylece grafem döngüsü bu karakterleri kaçırmayacak
   	displayText = displayText:gsub("<br%s*/>", "\n")
    	-- Zengin Metin etiketlerini kaldırın, çünkü karakter-tarafından animasyon etiketleri kıracaktır
   	displayText = displayText:gsub("<[^<>]->", "")
   
   	-- Ebeveyn üzerinde tercüman/modifiye edilmiş metin 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 kaynak dili İngilizce değilse ( "en" ), yerel kodu SOURCE_LOCALE kaynak diliyle eşleştirmek için yerelleştirme ayarlarında .

4. Uygun bir konumda bir TextLabel oluşturun, örneğin ScreenGui ebeveynli bir StarterGui .

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

   YerelScript
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   local AnimateUI = require(ReplicatedStorage:WaitForChild("AnimateUI"))
   
   local label = script.Parent
   
   -- Oyun yerelleştirildiyse çevirmeni yükle
   --AnimasyonUI.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)