Animación de interfaz de usuario/adolescentes

*Este contenido se traduce usando la IA (Beta) y puede contener errores. Para ver esta página en inglés, haz clic en aquí.

En la animaciones, transición es el proceso de generar marcos intermedios entre dos puntos clave en una secuencia.Al diseñar una interfaz de usuario, puedes usar tweening para transitar suavemente de un estado a otro, como:

  • Aumentar suavemente el tamaño de un botón cuando un usuario lo selecciona.
  • Menús de interfaz de usuario deslizantes dentro y fuera de los bordes de la pantalla.
  • Animar gradualmente una barra de salud entre dos anchos cuando un usuario recibe un impulso de salud.

Adolescentes de una sola propiedad

Posición

Para intercalar la posición de un : :

  1. Establece el AnchorPoint para el objeto.
  2. Determine UDim2 las coordenadas para la posición objetivo del objeto, usando los parámetros de escala de UDim2 en lugar de valores de píxeles exactos para que el objeto adolescente se centre exactamente en la pantalla.
  3. Pasa un TweenInfo y la posición objetivo a TweenService:Create() .
  4. Juega con el preadolescente con Tween:Play().

El siguiente fragmento de código mueve un ImageLabel dentro de un ScreenGui al centro exacto de la pantalla:

Tween de la interfaz de usuario - Posición
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()

Tamaño

Para reducir el tamaño de un : :

  1. Determine UDim2 las coordenadas para el tamaño objetivo del objeto, usando los parámetros de escala de UDim2 en lugar de valores de píxeles exactos para que el objeto adolescente alcance un porcentaje relativo del tamaño de la pantalla.
  2. Ata un UIAspectRatioConstraint a el objeto para mantener su proporción de aspecto diseñada al pasar por la transición.
  3. Pasa un TweenInfo y el tamaño objetivo a TweenService:Create() .
  4. Juega con el preadolescente con Tween:Play().

El siguiente fragmento de código escala un ImageLabel dentro de un ScreenGui a 40% de la anchura o altura de la pantalla (cualquiera de los dos sea menor) desde el punto de anclaje central del objeto:

UI Tween - Tamaño
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()

Rotación

Para mediar la rotación de un :

  1. Establece el AnchorPoint para que el objeto gire alrededor.
  2. Determine el objetivo Rotation para el objeto.
  3. Pasa un TweenInfo y la rotación objetivo a TweenService:Create() .
  4. Juega con el preadolescente con Tween:Play().
UI Tween - Tamaño
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()

Transparencia

Múltiples propiedades controlan la transparencia de la interfaz de usuario, dependiendo del introducirde objeto.Puedes transicionar cada una de estas propiedades individualmente o combinarlas a través de un transición de múltiples propiedades.Alternativamente, puedes aumentar la transparencia general de un objeto colocándolo dentro de un CanvasGroup y transfiriendo el grupo GroupTransparency .

Objeto de UIPropiedades
FrameBackgroundTransparency
TextLabelBackgroundTransparency , TextTransparency , TextStrokeTransparency
TextButtonBackgroundTransparency , TextTransparency , TextStrokeTransparency
ImageLabelBackgroundTransparency , ImageTransparency
ImageButtonBackgroundTransparency , ImageTransparency
UI Tween - Transparencia de imagen
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 - Transparencia del grupo de lienzos
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()

Colores

Múltiples propiedades controlan el color de la interfaz de usuario, dependiendo del introducirde objeto.Puedes transicionar cada una de estas propiedades individualmente o combinarlas a través de un transición de múltiples propiedades.Alternativamente, puedes cambiar el color general de un objeto colocándolo dentro de un CanvasGroup y transfiriendo el grupo GroupColor3 .

Objeto de UIPropiedades
FrameBackgroundColor3 , BorderColor3
TextLabelBackgroundColor3 , BorderColor3 , TextColor3 , TextStrokeColor3
TextButtonBackgroundColor3 , BorderColor3 , TextColor3 , TextStrokeColor3
ImageLabelBackgroundColor3 , BorderColor3 , ImageColor3
ImageButtonBackgroundColor3 , BorderColor3 , ImageColor3
UI Tween - Color de imagen
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 - Color del grupo de lienzos
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()

Trazo

Múltiples propiedades controlan las fronteras de la interfaz de usuario, dependiendo del introducirde objeto.

objetode UIPropiedades
FrameBorderSizePixel , BorderColor3
TextLabelBorderSizePixel , BorderColor3 , TextStrokeColor3 , TextStrokeTransparency
TextButtonBorderSizePixel , BorderColor3 , TextStrokeColor3 , TextStrokeTransparency
ImageLabelBorderSizePixel , BorderColor3
ImageButtonBorderSizePixel , BorderColor3

Alternativamente, puedes aplicar un UIStroke hijo y reducir su grosor, color y/o transparencia.

Objeto de UIPropiedades
UIStrokeColor , Thickness , Transparency
UI Tween - Color y espesor del trazado de la interfaz de usuario
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()

Adolescentes de propiedad múltiple

Puedes combinar cualquiera de los adolescentes de una sola propiedad en adolescentes más complejos pasando múltiples propiedades objetivo a TweenService:Create() , por ejemplo posición + rotación o tamaño + transparencia .

Interfaz de usuario adolescente - Posición y rotación
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 - Tamaño y transparencia
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()

Secuencias de preadolescente

Puedes encadenar animaciones de interfaz de usuario para que ocurran una tras otra al jugar a los adolescentes siguientes sobre el evento Completed del intermediación/interpolación de movimientoanterior.Por ejemplo, el siguiente script mueve un objeto al centro de la pantalla, luego lo gira en 45°.

Secuencia de transición de 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})



-- Jugar inicialmente la posición de intermediación/interpolación de movimiento

positionTween:Play()



-- Reproducir la rotación del tween al finalizar la rotación del intermediación/interpolación de movimiento

positionTween.Completed:Connect(function()

	rotationTween:Play()

end)

Opciones de alivio

Usando las opciones de suavización de , puedes controlar el estilo de suavización y la dirección de las animaciones de la interfaz de usuario .

Estilo

Enum.EasingStyle establece la velocidad de interpolación desde el principio hasta el finalizar. Por defecto, el estilo de suavización se establece en Enum.EasingStyle.Quad .

EstiloDescripción
Lineal Se mueve a una velocidad constante.
Sine La velocidad se determina por una onda de sine para un suave movimiento de relajación.
Cuádruple Similar a Sine pero con una curva más afilada ligeramente basada en la interpolación cuadrática.
Cubicado Similar a Cuádruple pero con una curva más afilada ligeramente basada en la interpolación cuadrática.
Cuarto Similar a Cubic pero con una curva más afilada basada en la interpolación cuadrática.
Quinto Similar a Cuarto pero con una curva más afilada basada en la interpolación cuadrática.
Exponencial La curva más afilada basada en la interpolación exponencial.
Circular Sigue un arco circular, de modo que la aceleración es más repentina y la desaceleración más gradual en comparación con Quint o Exponencial .
Volver Sobrepasa ligeramente al objetivo, luego se retira al lugar.
Rebote Rebota hacia atrás múltiples veces después de alcanzar el objetivo, antes de finalmente asentarse.
Elástico Se mueve como si estuviera atado a una banda de goma, superando al objetivo varias veces.
Graphs of EasingStyle variations with an 'In' EasingDirection. 
Estilo de facilidad - Cubo
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic)

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

Dirección

Enum.EasingDirection define cómo la interpolación de estilo de relajamiento se aplica a un objeto, con un valor predeterminado de Fuera .Tenga en cuenta que un preadolescente con estilo de suavización Lineal no se ve afectado, ya que la interpolación lineal es constante desde el principio hasta finalizar.

DirecciónDescripción
In El estilo de suavización se aplica en una dirección hacia adelante.
Fuera El estilo de suavización se aplica en una dirección inversa.
En salida El estilo de suavización se aplica hacia adelante para la primera mitad y en reversa para la segunda mitad.
Dirección de alivio - InOut
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic, Enum.EasingDirection.InOut)

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

Animar texto

Puedes mejorar fácilmente la interfaz de usuario basada en texto, como los banners de escena, las instrucciones del jugador y las ventanas de diálogo, con efectos animados.

Efecto de tipowriter

El efecto de "tipo de máquina de escribir" es ideal para TextLabels que cuenten una historia, generen conversaciones de NPC, etc.

  1. Crea un nuevo ModuleScript dentro de ReplicatedStorage .

  2. Renombra el nuevo script AnimateUI .

  3. Pega el siguiente código en el script:

    ModuleScript - Animación de UI
    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

    

    	-- Traduzca el texto si es posible

    	if translator then

    		displayText = translator:Translate(guiObject, text)

    	end

    

    	-- Reemplazar las etiquetas de salto de línea para que el bucle gráfico no pierda esos caracteres

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

     	-- Eliminar etiquetas de texto enriquecido ya que la animación de carácter por carácter romperá las etiquetas

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

    

    	-- Establecer texto traducido/modificado en el padre

    	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 en una ubicación adecuada, como dentro de un ScreenGui padre a StarterGui.

  5. Inserte un nuevo LocalScript como hijo directo de la etiqueta y pegue el siguiente código.Tenga en cuenta que cada mensaje se produce llamando AnimateUI.typeWrite() con parámetros para el objeto padre, la cadena para Saliday el retraso entre caracteres.

    Guión local
    local ReplicatedStorage = game:GetService("ReplicatedStorage")

    

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

    

    local label = script.Parent

    

    -- Cargar traductor si el juego está localizado

    --Animación de UI.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)