Animazione UI/tweens

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

• Aumentare gradualmente 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 della 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 target dell'oggetto, utilizzando i parametri di scala di UDim2 invece di valori pixel esatti in modo che l'oggetto tweeni al centro esatto dello schermo.
3. Passa un TweenInfo e la posizione target a TweenService:Create().
4. Riproduci il tween con Tween:Play().

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

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 target dell'oggetto, utilizzando i parametri di scala di UDim2 invece di valori pixel esatti in modo che l'oggetto tweeni a una percentuale relativa della dimensione dello schermo.
2. Attacca un UIAspectRatioConstraint all'oggetto per mantenere il suo rapporto d'aspetto progettato durante il tweening.
3. Passa un TweenInfo e la dimensione target 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:

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 Rotation target per l'oggetto.
3. Passa un TweenInfo e la rotazione target a TweenService:Create().
4. Riproduci il tween con Tween:Play().

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'interfaccia utente, a seconda del tipo di oggetto. Puoi tweenare ciascuna di queste proprietà singolarmente 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.

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

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'interfaccia utente, a seconda del tipo di oggetto. Puoi tweenare ciascuna di queste proprietà singolarmente 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 la GroupColor3 del gruppo.

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

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'interfaccia utente, a seconda del tipo di oggetto.

In alternativa, puoi applicare un figlio UIStroke e tweenare il suo spessore, colore e/o 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("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à target a TweenService:Create(), ad esempio posizione + rotazione o 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 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()

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 le animazioni UI affinché si verifichino una dopo l'altra riproducendo i tween successivi all'evento Completed del tween precedente. Ad esempio, il seguente script sposta un oggetto al centro dello schermo, quindi lo ruota di 45°.

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

-- Riproduci inizialmente 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, comparabili alle transizioni CSS, dove una o più proprietà UI vengono tweenate attraverso le definizioni di StyleRule. Vedi la guida Style Editor per dettagli.

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.

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 un valore predefinito di Out. Nota che un tween con stile di easing Lineare non è influenzato, poiché l'interpolazione lineare è costante dall'inizio alla fine.

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'interfaccia utente basata su testo, come banner di scene, istruzioni per i giocatori e messaggi, con effetti animati. L'effetto "macchina da scrivere" è ideale per TextLabels che raccontano una storia, producono conversazioni di NPC, ecc.

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

2. Rinomina il nuovo script in 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 riga in modo che il ciclo dei grafemi non perda 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

   Se la lingua sorgente del tuo gioco non è l'inglese ("en"), cambia il codice della lingua per SOURCE_LOCALE per corrispondere alla lingua sorgente nelle impostazioni di localizzazione.

4. Crea un TextLabel in una posizione adatta, come all'interno di un ScreenGui genitore di StarterGui.

5. Inserisci un nuovo LocalScript come figlio diretto dell'etichetta e incolla il seguente codice. Nota che ogni messaggio viene prodotto chiamando AnimateUI.typeWrite() con parametri per l'oggetto genitore, la stringa da produrre 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 il gioco è localizzato
   --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 sfide!</font> <font size="30">😈</font>]]
   AnimateUI.typeWrite(label, message2, 0.05)