Animacja interfejsu/tweens

W animacja tweening to proces generowania ram pośrednich między dwoma kluczowymi punktami w sekwencji.Podczas projektowania interfejsu użytkownika możesz użyć przejścia, aby płynnie przejść z jednego stanu do drugiego, takiego jak:

Płynne zwiększanie rozmiaru przycisku, gdy użytkownik go wybiera.
Przesuwane menu UI w i z krawędzi ekranu.
Stopniowe animowanie paska zdrowia między dwoma szerokościami, gdy użytkownik otrzymuje zwiększenie zdrowia.

Teenagerzy z pojedynczą własnością

Pozycja

Aby przełączyć pozycję z >:

Ustaw AnchorPoint dla obiektu.
Określ koordynaty dla pozycji docelowej obiektu, używając parametrów skali zamiast dokładnych wartości pikeli, tak aby obiekt dostosował się do dokładnego centrum ekranu.
Przekaż TweenInfo i pozycję docelową do TweenService:Create().
Zagraj z nastolatkiem za pomocą Tween:Play().

Poniższy kod przesuwa ImageLabel w obrębie ScreenGui do dokładnego centrum ekranu:

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

Rozmiar

Aby zmniejszyć rozmiar :

Określ koordynaty dla rozmiaru docelowego obiektu, używając parametrów skali zamiast dokładnych wartości pikeli, tak aby obiekt dostosował się do procentowej wielkości ekranu.
Przyłącz UIAspectRatioConstraint do obiektu, aby zachować jego zaprojektowany stosunek aspektu podczas przejścia.
Przekaż TweenInfo i rozmiar docelowy do TweenService:Create().
Zagraj z nastolatkiem za pomocą Tween:Play().

Poniższy kod snippet skaluje ImageLabel w obrębie ScreenGui do 40% szerokości ekranu lub wysokości (która jest mniejsza) z punktu środka zakotwiczenia obiektu:

Interfejs użytkownika Tween - 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 przełączyć rotację z GuiObject :

Ustaw AnchorPoint.
Określ cel Rotation dla obiektu.
Przekaż TweenInfo i docelową rotację do TweenService:Create().
Zagraj z nastolatkiem za pomocą Tween:Play().

Interfejs użytkownika Tween - 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ść

Wiele właściwości kontroluje przejrzystość interfejsu użytkownika, w zależności od wpisywaćobiektu.Możesz przełączyć każdą z tych właściwości indywidualnie lub połączyć za pomocą przełączarki wielu właściwości.Alternatywnie możesz zmniejszyć ogólną przejrzystość obiektu, umieszczając go wewnątrz CanvasGroup i przejrzystość grupaGroupTransparency.

Obiekt UI	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 przełączyć przejrzystość pisma na obiekcie UIStroke zgodnie z opisem w pisaniu linii.

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

UI Tween - Przezroczystość grupy płócien
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

Wiele właściwości kontroluje kolor interfejsu, w zależności od wpisywaćobiektu.Możesz przełączyć każdą z tych właściwości indywidualnie lub połączyć za pomocą przełączarki wielu właściwości.Alternatywnie możesz rozcieńczyć ogólny kolor obiektu, umieszczając go wewnątrz CanvasGroup i rozcieńczając grupaGroupColor3.

Obiekt UI	Właściwości
Frame	BackgroundColor3 , BorderColor3
TextLabel	BackgroundColor3 , BorderColor3 , TextColor3 , TextStrokeColor3
TextButton	BackgroundColor3 , BorderColor3 , TextColor3 , TextStrokeColor3
ImageLabel	BackgroundColor3 , BorderColor3 , ImageColor3
ImageButton	BackgroundColor3 , BorderColor3 , ImageColor3

Jako nowoczesna alternatywa dla GuiObject.BorderColor3, TextLabel.TextStrokeColor3 i TextButton.TextStrokeColor3, możesz zmienić kolor oczekiwania na obiekcie UIStroke zgodnie z opisem w Obrzędzie.

UI Tween - Kolor 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 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 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 targetColor = Color3.fromRGB(255, 0, 0)

local tweenInfo = TweenInfo.new(2)
local tween = TweenService:Create(canvasGroup, tweenInfo, {GroupColor3 = targetColor})

tween:Play()

Okrągły szlag

Wiele właściwości kontroluje granice interfejsu, w zależności od wpisywaćobiektu.

Obiekt UI	Właściwości
Frame	BorderSizePixel , BorderColor3
TextLabel	BorderSizePixel , BorderColor3 , TextStrokeColor3 , TextStrokeTransparency
TextButton	BorderSizePixel , BorderColor3 , TextStrokeColor3 , TextStrokeTransparency
ImageLabel	BorderSizePixel , BorderColor3
ImageButton	BorderSizePixel , BorderColor3

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

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

UI Tween - Kolor i grubość paska 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("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()

Nastolatki wielowłasnościowe

Możesz połączyć dowolnego z jednoznacznych nastolatków w bardziej skomplikowane nastolatki, przekazując wiele celowych właściwości do TweenService:Create(), na przykład pozycję + rotację lub rozmiar + przejrzystość .

UI 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 użytkownika Tween - Rozmiar i przejrzystość
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 przejściowe

Możesz łączyć animacje interfejsu użytkownika, aby występowały jedna po drugiej, odtwarzając kolejne nastolatki na wydarzeniu poprzedniego nastolatka Completed.Na przykład następujący skrypt przesuwa obiekt do środka ekranu, a następnie obraca go o 45°.

Sekwencja UI Tween
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 odtwarzaj pozycję tween
positionTween:Play()

-- Odtwarzaj rotację tween po zakończeniu rotacji pozycji
positionTween.Completed:Connect(function()
	rotationTween:Play()
end)

Łagodzenie opcji

Używając opcji łagodzenia TweenInfo , możesz kontrolować łagodzenie stylu i kierunek animacji interfejsu.

Styl

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

Styl	Opis
Liniowy	Porusza się z stałą prędkością.
Sin	Prędkość jest określana przez falę sinusową dla łagodnego ruchu rozluźnienia.
Quad	Podobny do Sine ale z nieco ostrzejszą krzywą opartą na interpolacji kwadratycznej.
Sześciany	Podobny do Quad ale z nieco ostrzejszą krzywą opartą na interpolacji kostnej.
Kwartał	Podobny do Kostkowy ale z jeszcze ostrzejszą krzywą opartą na interpolacji kwartycznej.
Kwinty	Podobny do Quart ale z jeszcze ostrzejszą krzywą opartą na interpolacji kwintycznej.
Eksponencjalny	Najostrzejsza krzywa oparta na eksponencjalnej interpolacji.
Okrągłe	Podąża za okrągłym łukiem, tak że przyspieszenie jest bardziej nagłe, a spowolnienie bardziej stopniowe w stosunku do Quint lub Eksponencjalnego .
Wróć	Nieco przekracza cel, a następnie wraca na swoje miejsce.
Odbicie	Odbija się wstecz wielokrotnie po dotarciu do celu, zanim ostatecznie się osiągnie.
Elastyczny	Porusza się tak, jakby był przymocowany do gumowej taśmy, przekraczając cel kilka razy.

Graphs of EasingStyle variations with an 'In' EasingDirection.

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

Kierunek

Enum.EasingDirection określa, w jaki sposób interpolacja łagodzącego stylu ma zastosowanie do obiektu, z domyślnym wynikiem Out .Zauważ, że młodzież z liniowym stylem łagodzenia nie jest dotknięta, ponieważ liniowa interpolacja jest stała od początku do kończyć.

Kierunek	Opis
In	Styl łagodzenia stosuje się w kierunku przodu.
Wyjście	Styl łagodzenia stosuje się w odwrotnym kierunku.
Wyjście	Styl łagodzenia obowiązuje do przodu dla pierwszej połowy i wstecz dla drugiej połowy.

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

Animować tekst

Możesz łatwo ulepszyć interfejs użytkownika oparty na tekście, takie jak banery cutscene, instrukcje gracza i monity, za pomocą animowanych efektów.

Efekt maszyny do pisania

Efekt "maszyny do pisania" jest idealny do TextLabels opowiadania historii, wyświetlania rozmów NPC itp.

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

Wklej następujący kod do skryptu:

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

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

	-- Zastąp tagi przerwania linii, aby pętla grafeme nie przegapiła tych znaków
	displayText = displayText:gsub("<br%s*/>", "\n")
 	-- Usuń tagi RichText, ponieważ animacja char-by-char zniszczy tagi
	displayText = displayText:gsub("<[^<>]->", "")

	-- Ustaw przetłumaczony/zmieniony tekst na rodzicu
	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 język źródła twojego doświadczenia nie jest angielski , zmień kod lokalny dla na pasujący do języka źródła w ustawieniach lokalizacji .

Utwórz TextLabel w odpowiednim miejscu, takim jak w ramach ScreenGui rodzica do StarterGui.

Wprowadź nowy LocalScript jako bezpośrednie dziecko etykiety i wklej następujący kod.Zauważ, że każda wiadomość jest wyświetlana za pomocą wezwania AnimateUI.typeWrite() z parametrami dla obiektu rodzica, ciągiem do wyświetlenia i opóźnieniem 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
--AnimujUI.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)

Na tej stronie