Animazione UI/adolescenti

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

In animazioni, tweening è il processo di generazione di frame intermedi tra due punti chiave in una sequenza.Durante la progettazione di un'interfaccia utente, puoi usare il tweening per passare senza problemi da uno stato all'altro, come:

  • Aumentare lentamente la dimensione di un pulsante quando un utente lo seleziona.
  • Menù di scorrimento dell'interfaccia utente all'interno e all'esterno degli angoli dello schermo.
  • Animare gradualmente una barra della salute tra due larghezze quando un utente riceve un aumento della salute.

Adolescenti di proprietà singola

Posizione

Per passare alla posizione di un : :

  1. Imposta il AnchorPoint per l'oggetto.
  2. Determina UDim2 le coordinate per la posizione target dell'oggetto, usando i parametri scala di UDim2 invece di valori pixel esatti così che l'oggetto raggiunga l'esatto centro dello schermo.
  3. Passa un TweenInfo e la posizione target a TweenService:Create() .
  4. Gioca con il tween con Tween:Play() .

Il seguente snippet di codice sposta un ImageLabel all'interno di un ScreenGui all'esatto 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()

Dimensioni

Per ridurre la dimensione di un :

  1. Determina UDim2 le coordinate per la dimensione target dell'oggetto, usando i parametri scala di UDim2 invece di valori pixelari esatti in modo che l'oggetto raggiunga una percentuale relativa della dimensione dello schermo.
  2. Aggiungi un UIAspectRatioConstraint al oggetto per mantenere la sua proporzione aspect ratio progettata durante il transito.
  3. Passa un TweenInfo e la dimensione target a TweenService:Create() .
  4. Gioca con il tween con Tween:Play() .

Il seguente snippet di codice scala un ImageLabel all'interno di un ScreenGui a 40% della larghezza o dell'altezza dello schermo (che sia 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 passare la rotazione di un :

  1. Imposta il AnchorPoint per l'oggetto da ruotare attorno.
  2. Determina il bersaglio Rotation per l'oggetto.
  3. Passa un TweenInfo e la rotazione target a TweenService:Create() .
  4. Gioca con 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

Diverse proprietà controllano la trasparenza dell'interfaccia utente, a seconda del inserisci / scrividi oggetto.Puoi passare attraverso ciascuna di queste proprietà individualmente o combinarle attraverso un passaggio multi-proprietà.In alternativa, puoi aumentare la trasparenza generale di un oggetto posizionandolo all'interno di un CanvasGroup e tweenando il GruppoGroupTransparency.

Oggetto UIProprietà
FrameBackgroundTransparency
TextLabelBackgroundTransparency , TextTransparency , TextStrokeTransparency
TextButtonBackgroundTransparency , TextTransparency , TextStrokeTransparency
ImageLabelBackgroundTransparency , ImageTransparency
ImageButtonBackgroundTransparency , ImageTransparency
UI Tween - Trasparenza dell'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 del gruppo 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()

Colore

Diverse proprietà controllano il colore dell'interfaccia utente, a seconda del inserisci / scrividi oggetto.Puoi passare attraverso ciascuna di queste proprietà individualmente o combinarle attraverso un passaggio multi-proprietà.In alternativa, puoi bilanciare il colore complessivo di un oggetto posizionandolo all'interno di un CanvasGroup e bilanciando il Gruppodi GroupColor3.

Oggetto UIProprietà
FrameBackgroundColor3 , BorderColor3
TextLabelBackgroundColor3 , BorderColor3 , TextColor3 , TextStrokeColor3
TextButtonBackgroundColor3 , BorderColor3 , TextColor3 , TextStrokeColor3
ImageLabelBackgroundColor3 , BorderColor3 , ImageColor3
ImageButtonBackgroundColor3 , BorderColor3 , ImageColor3
UI Tween - Colore dell'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 del gruppo 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()

Tratto

Diverse proprietà controllano i bordi dell'interfaccia utente, a seconda del inserisci / scrividi oggetto.

oggettoUIProprietà
FrameBorderSizePixel , BorderColor3
TextLabelBorderSizePixel , BorderColor3 , TextStrokeColor3 , TextStrokeTransparency
TextButtonBorderSizePixel , BorderColor3 , TextStrokeColor3 , TextStrokeTransparency
ImageLabelBorderSizePixel , BorderColor3
ImageButtonBorderSizePixel , BorderColor3

In alternativa, puoi applicare un UIStroke figlio e tween la sua spessore, colore e/o trasparenza.

Oggetto UIProprietà
UIStrokeColor , Thickness , Transparency
UI Tween - Colore e spessore dell'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()

Adolescenti multi-proprietà

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

UI Tween - Posizione e 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 e 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 mezzo

Puoi incatenare le animazioni dell'interfaccia gemellatiper accadere una dopo l'altra giocando ai successivi adolescenti sull'evento Completed precedente dell'adolescente.Ad esempio, il seguente script sposta un oggetto al centro dello schermo, quindi lo ruota di 45°.

Sequenza di transizione 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 la posizione gemellati

positionTween:Play()



-- Riproduci la rotazione tween alla fine della rotazione della posizione

positionTween.Completed:Connect(function()

	rotationTween:Play()

end)

Opzioni di alleggerimento

Usando le opzioni di alleggerimento di , puoi controllare lo stile di alleggerimento e la direzione di animazioni UI.

Stile

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

StileDescrizione
Lineare Si muove a una velocità costante.
Cosine La velocità è determinata da un'onda sine per una lieve azione di allentamento.
Quadro Simile a Sine ma con una curva leggermente più acuta basata sull'interpolazione (di stringhe)quadratica.
Cubico Simile a Quad ma con una curva leggermente più acuta basata sull'interpolazione (di stringhe)cubica.
Quarto Simile a Cubico ma con una curva ancora più acuta basata sull'interpolazione (di stringhe)quadratica.
Quinto Simile a Quarto ma con una curva ancora più acuta basata sull'interpolazione (di stringhe)quintica.
Esponenziale La curva più acuta basata sull'interpolazione interpolazione (di stringhe).
Circolare Segue un arco circolare, in modo che l'accelerazione sia più improvvisa e la decelerazione più graduale rispetto a Quint o Esponenziale .
Indietro Supera leggermente il bersaglio, quindi ritorna al suo Posto.
Rimbalzo Rimbalza all'indietro più volte dopo aver raggiunto il bersaglio, prima di essere infine seduto.
Elastico Si muove come se fosse attaccato a una banda di gomma, superando il bersaglio più volte.
Graphs of EasingStyle variations with an 'In' EasingDirection. 
Stile di facilitazione - Cubico
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic)

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

Direzione

Enum.EasingDirection definisce come l'interpolazione di stile di alleggerimento si applichi a un oggetto, con un predefinito di Fuori .Si noti che un tween con lo stile di alleggerimento Lineare non è interessato, poiché l'interpolazione lineare è costante dall'inizio alla Terminare.

DirezioneDescrizione
In Lo stile di alleggerimento si applica in una direzione avanti.
Fuori Lo stile di allentamento si applica in una direzione inversa.
InOut Lo stile di alleggerimento si applica in avanti per la prima metà e inversamente per la seconda metà.
Direzione di allentamento - InOut
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic, Enum.EasingDirection.InOut)

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

Animare il testo

Puoi facilmente migliorare l'interfaccia utente basata sul testo, come banner di cutscene, istruzioni del giocatore e prompt, con effetti animati.

Effetto della macchina da scrivere

L'effetto "macchina da scrivere" è ideale per TextLabels quelli che raccontano una storia, producono conversazioni NPC, ecc.

  1. Crea una nuova ModuleScript all'interno di ReplicatedStorage .

  2. Rinomina lo script nuovo AnimateUI .

  3. Incolla il seguente codice nello script:

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

    

    	-- Tradurre il testo se possibile

    	if translator then

    		displayText = translator:Translate(guiObject, text)

    	end

    

    	-- Sostituisci i tag di interruzione della linea in modo che il ciclo di grafemi non perda quei caratteri

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

     	-- Rimuovi i tag RichText poiché l'animazione char-by-char distruggerà i tag

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

    

    	-- Imposta il testo tradotto/modificato sul parent

    	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, come all'interno di un ScreenGui genitori a StarterGui .

  5. Inserisci un nuovo LocalScript come figlio diretto dell'etichetta e pasta nel seguente codice.Nota che ogni messaggio viene generato chiamando AnimateUI.typeWrite() con parametri per l'oggetto padre, la stringa da Outpute il ritardo tra i caratteri.

    Script locale
    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 = [[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)