Animacja UI/tweens

*Ta zawartość została przetłumaczona przy użyciu narzędzi AI (w wersji beta) i może zawierać błędy. Aby wyświetlić tę stronę w języku angielskim, kliknij tutaj.

W animacji, tweening to proces generowania pośrednich klatek między dwoma punktami kluczowymi w sekwencji. Projektując interfejs użytkownika, możesz użyć tweeningu, aby płynnie przejść GuiObject z jednego stanu do drugiego, na przykład:

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

Tweeny pojedynczej właściwości

Pozycja

Aby tweenować pozycję GuiObject:

  1. Ustaw AnchorPoint dla obiektu.
  2. Określ współrzędne UDim2 dla docelowej pozycji obiektu, używając parametrów skali UDim2 zamiast dokładnych wartości pikselowych, aby obiekt tweenował do dokładnego środka ekranu.
  3. Przekaż TweenInfo i docelową pozycję do TweenService:Create().
  4. Odtwórz tween za pomocą Tween:Play().

Poniższy fragment kodu przesuwa ImageLabel w ScreenGui do dokładnego środka 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 tweenować rozmiar GuiObject:

  1. Określ współrzędne UDim2 dla docelowego rozmiaru obiektu, używając parametrów skali UDim2 zamiast dokładnych wartości pikselowych, aby obiekt tweenował do względnego procentu rozmiaru ekranu.
  2. Dołącz UIAspectRatioConstraint do obiektu, aby zachować jego zaprojektowany współczynnik proporcji podczas tweeningu.
  3. Przekaż TweenInfo i docelowy rozmiar do TweenService:Create().
  4. Odtwórz tween za pomocą Tween:Play().

Poniższy fragment kodu skaluje ImageLabel w ScreenGui do 40% szerokości lub wysokości ekranu (cokolwiek jest mniejsze) z punktu kotwiczenia obiektu:

UI 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 tweenować rotację GuiObject:

  1. Ustaw AnchorPoint dla obiektu, wokół którego ma się obracać.
  2. Określ docelową Rotation dla obiektu.
  3. Przekaż TweenInfo i docelową rotację do TweenService:Create().
  4. Odtwórz tween za pomocą Tween:Play().
UI Tween - 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 targetRotation = 45



local tweenInfo = TweenInfo.new(2)

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



tween:Play()

Przezroczystość

Wiele właściwości kontroluje przezroczystość UI, w zależności od typu obiektu. Możesz tweenować każdą z tych właściwości indywidualnie lub w połączeniu przez tween wielowłaściwościowy. Alternatywnie, możesz tweenować ogólną przezroczystość obiektu, umieszczając go w CanvasGroup i tweenując GroupTransparency grupy.

Obiekt UIWłaściwości
FrameBackgroundTransparency
TextLabelBackgroundTransparency, TextTransparency, TextStrokeTransparency
TextButtonBackgroundTransparency, TextTransparency, TextStrokeTransparency
ImageLabelBackgroundTransparency, ImageTransparency
ImageButtonBackgroundTransparency, ImageTransparency
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 kanwasu
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 UI, w zależności od typu obiektu. Możesz tweenować każdą z tych właściwości indywidualnie lub w połączeniu przez tween wielowłaściwościowy. Alternatywnie, możesz tweenować ogólny kolor obiektu, umieszczając go w CanvasGroup i tweenując GroupColor3 grupy.

Obiekt UIWłaściwości
FrameBackgroundColor3, BorderColor3
TextLabelBackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
TextButtonBackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
ImageLabelBackgroundColor3, BorderColor3, ImageColor3
ImageButtonBackgroundColor3, BorderColor3, ImageColor3
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 kanwasu
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()

Kontur

Wiele właściwości kontroluje krawędzie UI, w zależności od typu obiektu.

Obiekt UIWłaściwości
FrameBorderSizePixel, BorderColor3
TextLabelBorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
TextButtonBorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
ImageLabelBorderSizePixel, BorderColor3
ImageButtonBorderSizePixel, BorderColor3

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

Obiekt UIWłaściwości
UIStrokeColor, Thickness, Transparency
UI Tween - Kolor i 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()

Tweeny wielowłaściwościowe

Możesz połączyć dowolne z tweenów pojedynczej właściwości w bardziej złożone tweens, przekazując wiele docelowych właściwości do TweenService:Create(), na przykład pozycja + rotacja lub rozmiar + przezroczystość.

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()
UI Tween - Rozmiar i 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ów

Możesz łączyć animacje UI, aby następowały jedna po drugiej, odtwarzając kolejne tweens po zdarzeniu Completed poprzedniego tweenu. Na przykład, poniższy skrypt przesuwa obiekt do środka ekranu, a następnie obraca go o 45°.

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



-- Początkowo odtwórz tween pozycji

positionTween:Play()



-- Odtwórz tween rotacji po zakończeniu tweenu pozycji

positionTween.Completed:Connect(function()

	rotationTween:Play()

end)

Przejścia stylów

Obiekty UI mogą być również animowane za pomocą przejść stylów, porównywalnych do przejść CSS, gdzie jedna lub więcej właściwości UI jest tweenowana przez definicje StyleRule. Zobacz przewodnik Edytor stylów dla szczegółów.

Ostateczna reguła stylu w Edytorze stylów.

Opcje łagodzenia

Używając opcji łagodzenia TweenInfo, możesz kontrolować styl i kierunek łagodzenia animacji UI.

Styl

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

StylOpis
LiniowyPorusza się z stałą prędkością.
SinusoidalnyPrędkość jest określana przez falę sinusoidalną dla łagodnego ruchu łagodzenia.
KwadratowyPodobny do Sinusoidalnego, ale z nieco ostrzejszą krzywą opartą na interpolacji kwadratowej.
SześciennyPodobny do Kwadratowego, ale z nieco ostrzejszą krzywą opartą na interpolacji sześciennej.
CzwórkowyPodobny do Sześciennego, ale z jeszcze ostrzejszą krzywą opartą na interpolacji czwórkowej.
PiątyPodobny do Czwórkowego, ale z jeszcze ostrzejszą krzywą opartą na interpolacji piątej.
EksponencjalnyNajostrzejsza krzywa oparta na interpolacji eksponencjalnej.
OkrągłyPodąża za okrągłym łukiem, tak że przyspieszenie jest bardziej nagłe, a spowolnienie bardziej stopniowe w porównaniu do Piątego lub Eksponencjalnego.
PowrótNieco przekracza cel, a następnie wraca na miejsce.
OdbicieOdbija się wstecz wielokrotnie po osiągnięciu celu, zanim ostatecznie się ustabilizuje.
ElastycznyPorusza się, jakby był przymocowany do gumki, przekraczając cel kilka razy.
Wykresy wariantów EasingStyle z kierunkiem łagodzenia 'In'.
Styl łagodzenia - Sześcienny
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic)

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

Kierunek

Enum.EasingDirection definiuje, jak interpolacja stylu łagodzenia stosuje się do obiektu, z domyślnym ustawieniem Out. Zauważ, że tween z Liniowym stylem łagodzenia nie jest dotknięty, ponieważ interpolacja liniowa jest stała od początku do końca.

KierunekOpis
InStyl łagodzenia stosuje się w kierunku do przodu.
OutStyl łagodzenia stosuje się w kierunku odwrotnym.
InOutStyl łagodzenia stosuje się do przodu w pierwszej połowie, a w odwrotnym kierunku w drugiej połowie.
Kierunek łagodzenia - InOut
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic, Enum.EasingDirection.InOut)

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

Efekt maszyny do pisania na tekście

Możesz łatwo wzbogacić interfejs użytkownika oparty na tekście, taki jak banery w cutscenach, instrukcje dla graczy i komunikaty, o animowane efekty. Efekt "maszyny do pisania" jest idealny dla TextLabels, które opowiadają historię, wyświetlają rozmowy NPC itp.

  1. Utwórz nowy ModuleScript w ReplicatedStorage.

  2. Zmień nazwę nowego skryptu na AnimateUI.

  3. Wklej poniższy 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 łamania linii, aby pętla graphemów nie pominęła tych znaków

    	displayText = displayText:gsub("<br%s*/>", "\n")

     	-- Usuń tagi RichText, ponieważ animacja znak po znaku zepsuje tagi

    	displayText = displayText:gsub("<[^<>]->", "")

    

    	-- Ustaw przetłumaczony/zmodyfikowany 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

  4. Utwórz TextLabel w odpowiedniej lokalizacji, na przykład w ScreenGui będącym rodzicem StarterGui.

  5. Wstaw nowy LocalScript jako bezpośrednie dziecko etykiety i wklej poniższy kod. Zauważ, że każda wiadomość jest wyświetlana, wywołując AnimateUI.typeWrite() z parametrami dla obiektu rodzica, ciągu do wyświetlenia i opóźnienia między znakami.

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

    

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

    

    local label = script.Parent

    

    -- Załaduj tłumacza, jeśli gra jest zlokalizowana

    --AnimateUI.loadTranslator()

    

    local message1 = [[Za tymi drzwiami jest<br /><font size="46" color="rgb(255,50,25)">Wielki Zorgoth...</font> <font size="40">🗡</font>]]

    AnimateUI.typeWrite(label, message1, 0.05)

    

    task.wait(1)

    

    local message2 = [[...który rządzi tym lochem <font color="rgb(255,200,50)">bez wyzwania!</font> <font size="30">😈</font>]]

    AnimateUI.typeWrite(label, message2, 0.05)
©2026 Roblox Corporation. Nazwa Roblox, logo Roblox oraz hasło „Powering Imagination” należą do naszych zarejestrowanych i niezarejestrowanych znaków towarowych na terenie Stanów Zjednoczonych oraz w innych krajach.
Warunki·Prywatność·Dostępność·Wsparcie
Polski