Creatore

Animazione UI/tweens

*Questo contenuto è tradotto usando AI (Beta) e potrebbe contenere errori. Per visualizzare questa pagina in inglese, clicca qui.

Nell'animazione, il tweening è il processo di generare fotogrammi intermedi tra due punti chiave in una sequenza. Quando progetti un'interfaccia utente, puoi utilizzare il tweening per fare una transizione di un GuiObject in modo fluido da uno stato a un altro, come ad esempio:

  • Aumentare dolcemente la dimensione di un pulsante quando un utente lo seleziona.
  • Far scorrere i menu UI dentro e fuori dai bordi dello schermo.
  • Animare gradualmente una barra della salute tra due larghezze quando un utente riceve un potenziamento di salute.

Tween di singole proprietà

Posizione

Per tweenare la posizione di un GuiObject:

  1. Imposta il AnchorPoint per l'oggetto.
  2. Determina le coordinate UDim2 per la posizione obiettivo dell'oggetto, utilizzando i parametri scale di UDim2 invece di valori pixel esatti in modo che l'oggetto si tweeni esattamente al centro dello schermo.
  3. Passa un TweenInfo e la posizione obiettivo a TweenService:Create().
  4. Riproduci il tween con Tween:Play().

Il seguente frammento di codice sposta un ImageLabel all'interno di un ScreenGui esattamente al centro dello schermo:

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

Dimensione

Per tweenare la dimensione di un GuiObject:

  1. Determina le coordinate UDim2 per la dimensione obiettivo dell'oggetto, utilizzando i parametri scale di UDim2 invece di valori pixel esatti in modo che l'oggetto si tweeni a una percentuale relativa della dimensione dello schermo.
  2. Collega un UIAspectRatioConstraint all'oggetto per mantenere il suo rapporto di aspetto progettato durante il tweening.
  3. Passa un TweenInfo e la dimensione obiettivo a TweenService:Create().
  4. Riproduci il tween con Tween:Play().

Il seguente frammento di codice scala un ImageLabel all'interno di un ScreenGui al 40% della larghezza o altezza dello schermo (quella che è più piccola) dal punto di ancoraggio centrale dell'oggetto:

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

Rotazione

Per tweenare la rotazione di un GuiObject:

  1. Imposta il AnchorPoint per l'oggetto attorno al quale ruotare.
  2. Determina la rotazione obiettivo Rotation per l'oggetto.
  3. Passa un TweenInfo e la rotazione obiettivo a TweenService:Create().
  4. Riproduci il tween con Tween:Play().
UI Tween - Dimensione
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()

Trasparenza

Più proprietà controllano la trasparenza dell'UI, a seconda del tipo di oggetto. Puoi tweenare ciascuna di queste proprietà individualmente o combinate tramite un tween di più proprietà. In alternativa, puoi tweenare la trasparenza complessiva di un oggetto posizionandolo all'interno di un CanvasGroup e tweenando la GroupTransparency del gruppo.

Oggetto UIProprietà
FrameBackgroundTransparency
TextLabelBackgroundTransparency, TextTransparency, TextStrokeTransparency
TextButtonBackgroundTransparency, TextTransparency, TextStrokeTransparency
ImageLabelBackgroundTransparency, ImageTransparency
ImageButtonBackgroundTransparency, ImageTransparency
UI Tween - Trasparenza Immagine
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 - Trasparenza di Canvas Group
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()

Colore

Più proprietà controllano il colore dell'UI, a seconda del tipo di oggetto. Puoi tweenare ciascuna di queste proprietà individualmente o combinate tramite un tween di più proprietà. In alternativa, puoi tweenare il colore complessivo di un oggetto posizionandolo all'interno di un CanvasGroup e tweenando il GroupColor3 del gruppo.

Oggetto UIProprietà
FrameBackgroundColor3, BorderColor3
TextLabelBackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
TextButtonBackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
ImageLabelBackgroundColor3, BorderColor3, ImageColor3
ImageButtonBackgroundColor3, BorderColor3, ImageColor3
UI Tween - Colore Immagine
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 - Colore di Canvas Group
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()

Tratto

Più proprietà controllano i bordi dell'UI, a seconda del tipo di oggetto.

Oggetto UIProprietà
FrameBorderSizePixel, BorderColor3
TextLabelBorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
TextButtonBorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
ImageLabelBorderSizePixel, BorderColor3
ImageButtonBorderSizePixel, BorderColor3

In alternativa, puoi applicare un UIStroke figlio e tweenare il suo spessore, colore e/o trasparenza.

Oggetto UIProprietà
UIStrokeColor, Thickness, Transparency
UI Tween - Colore & Spessore 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()

Tween di più proprietà

Puoi combinare qualsiasi dei tween di singole proprietà in tween più complessi passando più proprietà obiettivo a TweenService:Create(), ad esempio posizione + rotazione o dimensione + trasparenza.

UI Tween - Posizione & Rotazione
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 - Dimensione & Trasparenza
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()

Sequenze di tween

Puoi concatenare animazioni UI per avvenire una dopo l'altra riproduttando ulteriori tweens all'evento Completed del tween precedente. Ad esempio, il seguente script sposta un oggetto al centro dello schermo, quindi lo ruota di 45°.

Sequenza di Tween 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})



-- Inizialmente riproduci il tween di posizione

positionTween:Play()



-- Riproduci il tween di rotazione al completamento del tween di posizione

positionTween.Completed:Connect(function()

	rotationTween:Play()

end)

Transizioni di stile

Gli oggetti UI possono anche essere animati attraverso transizioni di stile, paragonabili alle transizioni CSS, dove una o più proprietà UI vengono tweenate tramite le definizioni di StyleRule. Vedi la guida Editor di Stili per maggiori dettagli.

Risultato finale della regola di stato stilizzato nell'Editor di Stili.

Opzioni di easing

Utilizzando le opzioni di easing di TweenInfo, puoi controllare lo stile e la direzione dell'easing delle animazioni UI.

Stile

Enum.EasingStyle imposta il tasso di interpolazione dall'inizio alla fine. Per impostazione predefinita, lo stile di easing è impostato su Enum.EasingStyle.Quad.

StileDescrizione
LineareSi muove a una velocità costante.
SenoLa velocità è determinata da un'onda sinusoidale per un movimento di easing dolce.
QuadSimile a Seno ma con una curva leggermente più ripida basata sull'interpolazione quadratica.
CuboSimile a Quad ma con una curva leggermente più ripida basata sull'interpolazione cubica.
QuartSimile a Cubo ma con una curva ancora più ripida basata sull'interpolazione quartica.
QuintSimile a Quart ma con una curva ancora più ripida basata sull'interpolazione quintica.
EsponenzialeLa curva più ripida basata sull'interpolazione esponenziale.
CircolareSeguirà un arco circolare, in modo tale che l'accelerazione sia più brusca e la decelerazione più graduale rispetto a Quint o Esponenziale.
RetroSupera leggermente l'obiettivo, quindi torna in posizione.
RimbalzoRimbalza all'indietro più volte dopo aver raggiunto l'obiettivo, prima di stabilizzarsi.
ElasticoSi muove come se fosse attaccato a una fascia elastica, superando l'obiettivo diverse volte.
Grafici delle variazioni di EasingStyle con una 'EasingDirection' 'In'. 
Stile di Easing - Cubico
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic)

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

Direzione

Enum.EasingDirection definisce come l'interpolazione dello stile di easing si applica a un oggetto, con una impostazione predefinita di Out. Nota che un tween con lo stile di easing Lineare non è influenzato, poiché l'interpolazione lineare è costante dall'inizio alla fine.

DirezioneDescrizione
InLo stile di easing si applica in avanti.
OutLo stile di easing si applica all'indietro.
InOutLo stile di easing si applica in avanti per la prima metà e all'indietro per la seconda metà.
Direzione di Easing - InOut
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic, Enum.EasingDirection.InOut)

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

Effetto macchina da scrivere sul testo

Puoi facilmente migliorare l'UI basata su testo, come banner di scene, istruzioni per i giocatori e promemoria, con effetti animati. L'effetto "macchina da scrivere" è ideale per TextLabels che raccontano una storia, visualizzano conversazioni di NPC, ecc.

  1. Crea un nuovo ModuleScript all'interno di ReplicatedStorage.

  2. Rinomina il nuovo script AnimateUI.

  3. Incolla il seguente codice nello script:

    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

    

    	-- Traduci il testo se possibile

    	if translator then

    		displayText = translator:Translate(guiObject, text)

    	end

    

    	-- Sostituisci i tag di interruzione di linea in modo che il ciclo grapheme non manchi quei caratteri

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

     	-- Rimuovi i tag RichText poiché l'animazione carattere per carattere romperà i tag

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

    

    	-- Imposta il testo tradotto/modificato sul genitore

    	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. Crea un TextLabel in una posizione adeguata, ad esempio all'interno di un ScreenGui parentato a StarterGui.

  5. Inserisci un nuovo LocalScript come figlio diretto dell'etichetta e incolla il seguente codice. Nota che ogni messaggio è visualizzato chiamando AnimateUI.typeWrite() con parametri per l'oggetto genitore, la stringa da visualizzare e il ritardo tra i caratteri.

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

    

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

    

    local label = script.Parent

    

    -- Carica il traduttore se l'esperienza è localizzata

    --AnimateUI.loadTranslator()

    

    local message1 = [[Oltre questa porta c'è il<br /><font size="46" color="rgb(255,50,25)">Grande Zorgoth...</font> <font size="40">🗡</font>]]

    AnimateUI.typeWrite(label, message1, 0.05)

    

    task.wait(1)

    

    local message2 = [[...che governa questo dungeon <font color="rgb(255,200,50)">senza sfidealti!</font> <font size="30">😈</font>]]

    AnimateUI.typeWrite(label, message2, 0.05)
© 2026 Roblox Corporation. Roblox, il logo Roblox e Powering Imagination sono tra i nostri marchi registrati e non registrati negli Stati Uniti. e altri paesi.
Termini·Privacy·Accessibilità·Assistenza
Italiano