Animación de UI/tweens

*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 animación, tweening es el proceso de generar fotogramas intermedios entre dos puntos clave en una secuencia. Al diseñar una interfaz de usuario, puedes usar tweening para transitar un GuiObject suavemente de un estado a otro, como:

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

Tweens de propiedad única

Posición

Para tweenear la posición de un GuiObject:

  1. Establece el AnchorPoint para el objeto.
  2. Determina las coordenadas UDim2 para la posición objetivo del objeto, utilizando los parámetros de escala de UDim2 en lugar de valores de píxeles exactos para que el objeto tweene al centro exacto de la pantalla.
  3. Pasa un TweenInfo y la posición objetivo a TweenService:Create().
  4. Reproduce el tween con Tween:Play().

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

UI Tween - 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 tweenear el tamaño de un GuiObject:

  1. Determina las coordenadas UDim2 para el tamaño objetivo del objeto, utilizando los parámetros de escala de UDim2 en lugar de valores de píxeles exactos para que el objeto tweene a un porcentaje relativo del tamaño de la pantalla.
  2. Adjunta un UIAspectRatioConstraint al objeto para mantener su relación de aspecto diseñada al tweenear.
  3. Pasa un TweenInfo y el tamaño objetivo a TweenService:Create().
  4. Reproduce el tween con Tween:Play().

El siguiente fragmento de código escala un ImageLabel dentro de un ScreenGui al 40% del ancho o alto de la pantalla (el que sea más pequeño) 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 tweenear la rotación de un GuiObject:

  1. Establece el AnchorPoint para el objeto alrededor del cual rotar.
  2. Determina la Rotación objetivo para el objeto.
  3. Pasa un TweenInfo y la rotación objetivo a TweenService:Create().
  4. Reproduce el tween 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 UI, dependiendo del tipo de objeto. Puedes tweenear cada una de estas propiedades individualmente o combinadas a través de un tween de múltiples propiedades. Alternativamente, puedes tweenear la transparencia general de un objeto colocándolo dentro de un CanvasGroup y tweenando la GroupTransparency del grupo.

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

Color

Múltiples propiedades controlan el color de la UI, dependiendo del tipo de objeto. Puedes tweenear cada una de estas propiedades individualmente o combinadas a través de un tween de múltiples propiedades. Alternativamente, puedes tweenear el color general de un objeto colocándolo dentro de un CanvasGroup y tweenando el GroupColor3 del grupo.

Objeto 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 Lienzo
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 los bordes de la UI, dependiendo del tipo de objeto.

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

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

Objeto UIPropiedades
UIStrokeColor, Thickness, Transparency
UI Tween - Color y Grosor de 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 de múltiples propiedades

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

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

Puedes encadenar animaciones de UI para que ocurran una tras otra reproduciendo tweens subsiguientes al evento Completed del tween anterior. Por ejemplo, el siguiente script mueve un objeto al centro de la pantalla, luego lo rota 45°.

Secuencia de UI Tween
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})



-- Reproduce inicialmente el tween de posición

positionTween:Play()



-- Reproduce el tween de rotación al completar el tween de posición

positionTween.Completed:Connect(function()

	rotationTween:Play()

end)

Transiciones de estilo

Los objetos de UI también pueden ser animados a través de transiciones de estilo, comparables a transiciones CSS, donde una o más propiedades de UI son tweened a través de definiciones de StyleRule. Consulta la guía del Editor de Estilos para más detalles.

Regla de estado final estilizado en el Editor de Estilos.

Opciones de easing

Usando las opciones de easing de TweenInfo, puedes controlar el estilo y la dirección del easing de las animaciones de UI.

Estilo

Enum.EasingStyle establece la tasa de interpolación de inicio a fin. Por defecto, el estilo de easing está configurado en Enum.EasingStyle.Quad.

EstiloDescripción
LinealSe mueve a una velocidad constante.
SenoLa velocidad está determinada por una onda seno para un movimiento de easing suave.
CuadráticoSimilar a Seno pero con una curva ligeramente más pronunciada basada en la interpolación cuadrática.
CúbicoSimilar a Cuadrático pero con una curva ligeramente más pronunciada basada en la interpolación cúbica.
CuárticoSimilar a Cúbico pero con una curva aún más pronunciada basada en la interpolación cuártica.
QuinticoSimilar a Cuártico pero con una curva aún más pronunciada basada en la interpolación quintica.
ExponencialLa curva más pronunciada basada en la interpolación exponencial.
CircularSigue un arco circular, de modo que la aceleración es más repentina y la desaceleración más gradual en comparación con Quintico o Exponencial.
RetrocesoSobrepasa ligeramente el objetivo, luego retrocede a su lugar.
ReboteRebota hacia atrás varias veces después de alcanzar el objetivo, antes de finalmente asentarse.
ElásticoSe mueve como si estuviera unido a una banda elástica, sobrepasando el objetivo varias veces.
Gráficas de variaciones de EasingStyle con una 'In' EasingDirection.
Estilo de Easing - Cúbico
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic)

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

Dirección

Enum.EasingDirection define cómo se aplica la interpolación del estilo de easing a un objeto, con un valor por defecto de Out. Ten en cuenta que un tween con estilo de easing Lineal no se ve afectado, ya que la interpolación lineal es constante de inicio a fin.

DirecciónDescripción
InEl estilo de easing se aplica en dirección hacia adelante.
OutEl estilo de easing se aplica en dirección inversa.
InOutEl estilo de easing se aplica hacia adelante en la primera mitad y en reversa en la segunda mitad.
Dirección de Easing - InOut
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic, Enum.EasingDirection.InOut)

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

Efecto de máquina de escribir en texto

Puedes mejorar fácilmente la UI basada en texto, como banners de escenas, instrucciones para jugadores y mensajes, con efectos animados. El efecto "máquina de escribir" es ideal para TextLabels que cuentan una historia, muestran conversaciones de NPC, etc.

  1. Crea un nuevo ModuleScript dentro de ReplicatedStorage.

  2. Renombra el nuevo script a AnimateUI.

  3. Pega el siguiente código en el 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

    

    	-- Traduce el texto si es posible

    	if translator then

    		displayText = translator:Translate(guiObject, text)

    	end

    

    	-- Reemplaza las etiquetas de salto de línea para que el bucle de grafemas no se pierda esos caracteres

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

     	-- Elimina las etiquetas RichText ya que la animación carácter por carácter romperá las etiquetas

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

    

    	-- Establece el 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 parentado a StarterGui.

  5. Inserta un nuevo LocalScript como un hijo directo de la etiqueta y pega el siguiente código. Ten en cuenta que cada mensaje se muestra llamando a AnimateUI.typeWrite() con parámetros para el objeto padre, la cadena a mostrar y el retraso entre caracteres.

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

    

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

    

    local label = script.Parent

    

    -- Carga el traductor si el juego está localizado

    --AnimateUI.loadTranslator()

    

    local message1 = [[Más allá de esta puerta está el<br /><font size="46" color="rgb(255,50,25)">Gran Zorgoth...</font> <font size="40">🗡</font>]]

    AnimateUI.typeWrite(label, message1, 0.05)

    

    task.wait(1)

    

    local message2 = [[...quien gobierna esta mazmorras <font color="rgb(255,200,50)">sin ser desafiado!</font> <font size="30">😈</font>]]

    AnimateUI.typeWrite(label, message2, 0.05)
©2026 Roblox Corporation. Roblox, el logotipo de Roblox y "Powering Imagination" son algunas de nuestras marcas registradas y no registradas en los Estados Unidos y otros países.
Términos·Privacidad·Accesibilidad·Soporte
Español