Animacja interfejsu/Dzieci | Dokumentacja

W animacja, tweening jest procesem generowania ramy przejściowej między dwoma kluczowymi punktami w kolejności. Gdy projektujesz interfejs użytkownika, możesz użyć tweeningu, aby GuiObject łatwo przejść z jednego stanu do innego, takiego jak:

Płynne powiększanie rozmiaru przycisku, gdy użytkownik go wybiera.
Przesuwanie menu interfejsu w górę i w dół z boku ekranu.
Stopniowo animuj barwę zdrowia pomiędzy dwoma szerokościami, gdy użytkownik otrzymuje wzmocnienie zdrowia.

Małe dzieci

Pozycja

Aby ustawić pozycję Class.GuiObject :

Ustaw AnchorPoint dla obiektu.
Określ UDim2 koordynaty dla pozycji celu obiektu, używając parametrów skali Datatype.UDim2 zamiast dokładnych wartości pikseli, aby obiekt zmienił się w dokładną pozycję ekranu.
Przekaż TweenInfo i pozycję docelową do TweenService:Create() .
Graj z tweenem za pomocą Tween:Play() .

Poniższy kod porusza ImageLabel w ciągu ScreenGui do dokładnego centrum ekranu:

Interfejs Tween - Pozycja
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()

Wielkość

Aby zmniejszyć rozmiar Class.GuiObject :

Określ UDim2 koordynaty dla rozmiaru celu obiektu, używając parametrów skali Datatype.UDim2 zamiast dokładnych wartości pikseli, aby obiekt nakłaniał się do procentowej skali obiektu zamiast dokładnych wartości pikseli.
Załącz UIAspectRatioConstraint do obiektu, aby utrzymać jego zaprojektowany wskaźnik kształtu podczas tego, jak tween.
Przekaż TweenInfo i rozmiar docelowy na TweenService:Create() .
Graj z tweenem za pomocą Tween:Play() .

Poniższy kod snippet skaluje ImageLabel w ramach ScreenGui do 40% wielkości lub wysokości ekranu (którekolwiek jest mniejsze) z punktu mocowania centrum obiektu:

Interfejs użytkownika - Rozmiar
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()

Rotacja

Aby uczynić rotacjęGuiObject :

Ustaw AnchorPoint dla obiektu, aby się obrócił.
Określ cel Rotation dla obiektu.
Przekaż TweenInfo i rotację docelową do TweenService:Create() .
Graj z tweenem za pomocą Tween:Play() .

Interfejs użytkownika - Rozmiar
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()

Przezroczystość

Wielu właściwości kontroluje przejrzystość interfejsu użytkownika w zależności od wpisywaćobiektu. Możesz dostosować każdą z tych właściwości osobno lub połączyć je poprzez grupaprzetwarzanie wielu właściwości. Alternatywnie możesz dostosować ogólną przetwarzalność obiektu poprzez umieszczenie

Obiekt interfejsu	Właściwości
Frame	BackgroundTransparency
TextLabel	BackgroundTransparency , TextTransparency , TextStrokeTransparency
TextButton	BackgroundTransparency , TextTransparency , TextStrokeTransparency
ImageLabel	BackgroundTransparency , ImageTransparency
ImageButton	BackgroundTransparency , ImageTransparency

Jako nowoczesna alternatywa dla TextLabel.TextStrokeTransparency i TextButton.TextStrokeTransparency, możesz dostosować przejrzystość kreszki na obiekcie UIStroke opisanym w 1>Kredyt1>.

Interfejs Tween - Przezroczystość Obrazu
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()

Interfejs użytkownika Tween - Przezroczystość grupy płótna
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()

Kolor

Wielokolorowe interfejsy sterowania UI, w zależności od wpisywaćobiektu. Możesz dostosować każdy z tych interfejsów osobno lub połączyć je poprzez interfejsy wielo-właściwości. Alternatywnie możesz dostosować ogólną kolor obiektu poprzez umieszczenie go w CanvasGroup i tweening grupaClass

Obiekt interfejsu	Właściwości
Frame	BackgroundColor3 , BorderColor3
TextLabel	BackgroundColor3 , BorderColor3 , TextColor3 , 0> Class.TextLabel.TextStrokeColor3\|TextStrokeColor30>
TextButton	BackgroundColor3 , BorderColor3 , TextColor3 , 0> Class.TextButton.TextStrokeColor3\|TextStrokeColor30>
ImageLabel	BackgroundColor3 , BorderColor3 , ImageColor3
ImageButton	BackgroundColor3 , BorderColor3 , ImageColor3

Jako nowoczesna alternatywa dla GuiObject.BorderColor3 , TextLabel.TextStrokeColor3 i TextButton.TextStrokeColor3, możesz ustawić kolor kształtowania na obiekcie 1> Class.UIStroke1> tak, jak opisano w 4> Kąt4> .

Interfejs Tween - Kolor Zdjęcia
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 - Kolor grupy pikseli
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()

Stroka

Wielu właściwości steruje UI granicami, w zależności od wpisywaćobiektu.

Obiekt interfejsu	Właściwości
Frame	BorderSizePixel , BorderColor3
TextLabel	BorderSizePixel , BorderColor3 , TextStrokeColor3 , 0> Class.TextLabel.TextStrokeTransparency\|TextStrokeTransparency0>
TextButton	BorderSizePixel , BorderColor3 , TextStrokeColor3 , 0> Class.TextButton.TextStrokeTransparencyTransparency0>
ImageLabel	BorderSizePixel , BorderColor3
ImageButton	BorderSizePixel , BorderColor3

Alternatywnie możesz zastosować dziecko UIStroke i ustawić jego grubość, kolor i/lub przejrzystość.

Obiekt interfejsu	Właściwości
UIStroke	Color , Thickness , Transparency

Interfejs Tween - Kolor & Grubość UIStroke
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()

Wielorozdzielni Dziesięciolatkowie

Możesz połączyć dowolne z pojedynczych cech tweens w bardziej złożone tweens, poprzez przekazanie wielu cech docelowych do TweenService:Create(), na przykład pozycja + rotacja lub 1>rozmiar + przejrzystość1>.

Interfejs Tween - Pozycja i Rotacja
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()

Interfejs Tween - Rozmiar & Przezroczystość
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()

Sekwencje Tween

Możesz łańcuchować animacje interfejsu użytkownika, aby się pojawiły jeden po drugim, grając na następnych nastolatkach na wcześniejszym wydarzeniu Completed. Na przykład, poniższy skrypt przenosi obiekt na środek ekranu, a następnie obraca go o 45°.

Sekwencja Przesunięcia 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("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})

-- Początkowo grać pozycję tween
positionTween:Play()

-- Graj w obrót podczas ukończenia pozycji w obrócie
positionTween.Completed:Connect(function()
	rotationTween:Play()
end)

Opcje łagodzenia

Używając opcji łatwienia TweenInfo , możesz kontrolować łatwienie style i kierunek animacji UI.

Styl

Enum.EasingStyle ustawia stopień interpolacji od początku do kończyć. Domyślnie ustawiony styl łatwienia jest ustawiony na Enum.EasingStyle.Quad .

Styl	Opis
Liniowy	Porusza się w stałej szybkości.
Sinus	Prędkość jest determinowana przez falę sinusoidalną dla łagodniejszego ruchu.
Quadruple	Podobny do Sinu ale z nieco bardziej zaostrzoną kreślą opartą na interpolacji kwadratowej.
Kubiczny	Podobny do Quad ale z nieco bardziej zaostrzonym zakrętem opartym na interpolacji kostnej.
Czwarty	Podobny do Kubiczny ale z jeszcze bardziej zaostrzonego zakrętu opartego na interpolacji kwadratycznej.
Quint	Podobny do Quart ale z jeszcze bardziejostre kurwą opartą na interpolacji kwadratowej.
Eksponencja	Najostrzejszy zakręt oparty na interpolacji logarytmu.
Okrągły	Śledzi okrągły łuk, tak aby przyspieszenie było bardziej niespodziewane i odwrócenie bardziej stopniowe w porównaniu z Quint lub Exponential .
Powrót	Zdaje się trochę nadmiernie na celu, a potem wraca do miejsce.
Skoczka	Zwraca się do tyłu wiele razy po dotarciu do celu, zanim w końcu się osiadnie.
Elastyczny	Porusza się, jakby przywiązany do gumowego paska, nadmiernie trafiając w cel kilka razy.

Graphs of EasingStyle variations with an 'In' EasingDirection.

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

Kierunek

Enum.EasingDirection określa, jak interpolacja stylu łatwienia stosuje się do obiektu, z domyślnym Wyłącz . Uwaga, że tween z 0> liniowym0> stylem łatwienia nie jest dotyczy, ponieważ liniowe interpolacja jest stała od początku do kończyć.

Kierunek	Opis
W	Styl łatwego stosowania stosuje się w kierunku przodu.
Wyjdź	Styl łatwego stosowania zastosowany jest w odwrotnym kierunku.
InOut	Styl łatwienia stosuje się do przodu za pierwszą połowę i do tyłu za drugą połowę.

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

Animowany tekst

Możesz łatwo poprawić interfejs oparty na tekście, takich jak banery cutscene, instrukcje dla graczy i wskazówki, z animowanymi efektami.

Efekt pisania maszynowego

Efekt „tytuś” jest idealny dla TextLabels , które opowiadają historię, wykonują rozmowy z NPC itp.

Utwórz nowy ModuleScript w ReplicatedStorage.
Zmień nazwę nowego skryptu AnimateUI .

Wklej następujący kod do skryptu:

ModuleScript - Animacja interfejsu
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

	-- Tłumacz tekst, jeśli to możliwe
	if translator then
		displayText = translator:Translate(guiObject, text)
	end

	-- Zastąp tagi rozdziału linii, aby zapis grafemy nie zgubił tych znaków
	displayText = displayText:gsub("<br%s*/>", "\n")
 	-- Usuń tagi RichText, ponieważ animacja char-by-char złama tagi
	displayText = displayText:gsub("<[^<>]->", "")

	-- Ustawiony tłumaczony/modyfikowany tekst na rodzicielu
	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

Jeśli źródłowy język Twojego doświadczenia nie jest angielski ( en ) zmień kod lokalizacji dla "en" , aby dopasować język źródłowy w SOURCE_LOCALE .

Utwórz TextLabel w odpowiednim lokalizacjach, takich jak w ScreenGui rodzicielu StarterGui .

Utwórz nowy LocalScript jako bezpośredniego dziecka label i wklej następujący kod. Uwaga, że każde wiadomość jest wywołaniem przez wezwanie AnimateUI.typeWrite() z parami dla obiektu rodzica, struny do wyjścia i opóźnienia między znakami.

Lokalny Skrypt
local ReplicatedStorage = game:GetService("ReplicatedStorage")

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

local label = script.Parent

-- Załaduj tłumacz, jeśli gra jest zlokalizowana
--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)