Twórca

Animacja interfejsu/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 pomiędzy dwoma punktami kluczowymi w sekwencji. Projektując interfejs użytkownika, możesz użyć tweeningu do płynnego przejścia obiektu 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 pomiędzy dwoma szerokościami, gdy użytkownik otrzymuje bonus do zdrowia.

Tweens pojedynczej właściwości

Pozycja

Aby tweenować pozycję obiektu 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 w pikselach, 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 obrębie 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 obiektu GuiObject:

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

Poniższy fragment kodu skalowania ImageLabel w obrębie ScreenGui do 40% szerokości lub wysokości ekranu (cokolwiek jest mniejsze) z centralnego punktu kotwicy 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ę obiektu GuiObject:

  1. Ustaw AnchorPoint dla obiektu, wokół którego ma się rotować.
  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 - 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 przezroczystość UI, w zależności od typu obiektu. Możesz tweenować każdą z tych właściwości osobno lub w połączeniu poprzez tween wielu właściwości. 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 Canvas
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 osobno lub w połączeniu przez tween wielu właściwości. Alternatywnie, możesz tweenować ogólny kolor obiektu, umieszczając go w CanvasGroup i tweenując GroupColor3.

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

Obrys

Wiele właściwości kontroluje obramowania 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ć obiekt 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()

Tweens wielu właściwości

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

UI Tween - Pozycja & 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 & 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 połączyć animacje UI tak, aby następowały jedna po drugiej, odtwarzając kolejne tweens po zakończeniu 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()



-- Odtwarzaj tween rotacji po zakończeniu tweena 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 tweenowanych poprzez definicje StyleRule. Zobacz przewodnik po Edytorze stylów dla szczegółów.

Końcowy zestaw stylów w Edytorze stylów.

Opcje łagodzenia

Używając opcji łagodzenia TweenInfo, możesz kontrolować styl łagodzenia i kierunek 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ą.
SinePrędkość jest określona przez falę sinusoidalną dla łagodnego ruchu łagodzenia.
QuadPodobny do Sine, ale z nieco ostrzejszą krzywą opartą na interpolacji kwadratowej.
CubicPodobny do Quad, ale z nieco ostrzejszą krzywą opartą na interpolacji sześciennej.
QuartPodobny do Cubic, ale z jeszcze ostrzejszą krzywą opartą na interpolacji czwartej.
QuintPodobny do Quart, ale z jeszcze ostrzejszą krzywą opartą na interpolacji piątej.
ExponentialNajostrzejsza krzywa oparta na interpolacji eksponencjalnej.
CircularPodąża za łukiem okręgu, tak że przyspieszenie jest bardziej nagłe, a de facto wolniejsze w porównaniu do Quint lub Exponential.
BackNieco przekracza cel, a następnie wraca na miejsce.
BounceSkacze do tyłu wielokrotnie po osiągnięciu celu, zanim w końcu się ustabilizuje.
ElasticPorusza się tak, jakby był przyczepiony do gumki, wielokrotnie przekraczając cel.
Wykresy wariantów EasingStyle z 'In' EasingDirection. 
Styl łagodzenia - Cubic
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ślną wartością Out. Zauważ, że tween ze stylem łagodzenia Liniowy 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 wstecznym.
InOutStyl łagodzenia stosuje się w kierunku do przodu w pierwszej połowie, a w kierunku wstecznym 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 w tekście

Możesz łatwo wzbogacić tekstowe UI, takie jak banery cutscen, instrukcje dla graczy i monity, o efekty animowane. Efekt "maszyny do pisania" jest idealny dla TextLabels, które opowiadają historię, wyświetlają rozmowy NPC itd.

  1. Stwó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

    

    	-- Tłumaczenie tekstu, jeśli to możliwe

    	if translator then

    		displayText = translator:Translate(guiObject, text)

    	end

    

    	-- Zastąp znaczniki złamań wierszy, aby pętla grafemów nie pominęła tych znaków

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

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

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

    

    	-- Ustaw tłumaczony/modyfikowany 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. Stwórz TextLabel w odpowiedniej lokalizacji, na przykład w ramach ScreenGui, powiązanej z StarterGui.

  5. Wstaw nowy LocalScript jako bezpośrednie dziecko etykiety i wklej do niego poniższy kod. Zauważ, że każda wiadomość jest wyświetlana przez wywołanie AnimateUI.typeWrite() z parametrami dla obiektu rodzica, łańcucha 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 translator, jeśli doświadczenie jest lokalizowane

    --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