Creador(a)

Animación de interfaz/tiempos de espera

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

  • Aumentar suavemente el tamaño de un botón cuando un usuario lo selecciona.
  • Deslizar menús de la interfaz en 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.

Interpolaciones de una sola propiedad

Posición

Para interpolar 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 se interpole al centro exacto de la pantalla.
  3. Pasa un TweenInfo y la posición objetivo a TweenService:Create().
  4. Reproduce la interpolación con Tween:Play().

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

Interpolación de UI - 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 interpolar 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 se interpole 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 interpolar.
  3. Pasa un TweenInfo y el tamaño objetivo a TweenService:Create().
  4. Reproduce la interpolación 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 menor) desde el punto de anclaje central del objeto:

Interpolación de UI - 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 interpolar la rotación de un GuiObject:

  1. Establece el AnchorPoint para el objeto alrededor del cual rotará.
  2. Determina la Rotation objetivo para el objeto.
  3. Pasa un TweenInfo y la rotación objetivo a TweenService:Create().
  4. Reproduce la interpolación con Tween:Play().
Interpolación de UI - 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 targetRotation = 45



local tweenInfo = TweenInfo.new(2)

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



tween:Play()

Transparencia

Varias propiedades controlan la transparencia de la interfaz, dependiendo del tipo de objeto. Puedes interpolar cada una de estas propiedades individualmente o combinadas a través de una interpolación de múltiples propiedades. Alternativamente, puedes interpolar la transparencia general de un objeto colocándolo dentro de un CanvasGroup y interpolando la GroupTransparency del grupo.

Objeto UIPropiedades
FrameBackgroundTransparency
TextLabelBackgroundTransparency, TextTransparency, TextStrokeTransparency
TextButtonBackgroundTransparency, TextTransparency, TextStrokeTransparency
ImageLabelBackgroundTransparency, ImageTransparency
ImageButtonBackgroundTransparency, ImageTransparency
Interpolación de UI - 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()
Interpolación de UI - Transparencia de 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()

Color

Varias propiedades controlan el color de la UI, dependiendo del tipo de objeto. Puedes interpolar cada una de estas propiedades individualmente o combinadas a través de una interpolación de múltiples propiedades. Alternativamente, puedes interpolar el color general de un objeto colocándolo dentro de un CanvasGroup e interpolando el GroupColor3 del grupo.

Objeto UIPropiedades
FrameBackgroundColor3, BorderColor3
TextLabelBackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
TextButtonBackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
ImageLabelBackgroundColor3, BorderColor3, ImageColor3
ImageButtonBackgroundColor3, BorderColor3, ImageColor3
Interpolación de UI - 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()
Interpolación de UI - Color de 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()

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 entrelazar su grosor, color y/o transparencia.

Objeto UIPropiedades
UIStrokeColor, Thickness, Transparency
Interpolación de UI - 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()

Interpolaciones de múltiples propiedades

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

Interpolación de UI - 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()
Interpolación de UI - 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 interpolaciones

Puedes encadenar animaciones de UI para que ocurran una tras otra reproduciendo interpolaciones sucesivas en el evento Completed de la interpolación anterior. Por ejemplo, el siguiente script mueve un objeto al centro de la pantalla, luego lo rota 45°.

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



-- Reproduce inicialmente la interpolación de posición

positionTween:Play()



-- Reproduce la interpolación de rotación al completar la interpolación 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 se interpolan a través de definiciones de StyleRule. Consulta la guía de Editor de Estilo para más detalles.

Regla de estado estilizado final en el Editor de Estilo.

Opciones de suavizado

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

Estilo

Enum.EasingStyle establece la tasa de interpolación desde el inicio hasta el final. Por defecto, el estilo de suavizado 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 suavizado suave.
CuadráticoSimilar a Seno pero con una curva ligeramente más aguda basada en interpolación cuadrática.
CúbicoSimilar a Cuadrático pero con una curva ligeramente más aguda basada en interpolación cúbica.
CuárticoSimilar a Cúbico pero con una curva aún más aguda basada en interpolación cuártica.
QuintSimilar a Cuártico pero con una curva aún más aguda basada en interpolación quintica.
ExponencialLa curva más aguda basada en interpolación exponencial.
CircularSigue un arco circular, de tal manera que la aceleración es más repentina y la desaceleración más gradual en comparación con Quint o Exponencial.
RetrocesoSobrepasa ligeramente el objetivo, luego regresa a su lugar.
ReboteRebota varias veces hacia atrás después de alcanzar el objetivo, antes de finalmente estabilizarse.
ElásticoSe mueve como si estuviera unido a una banda elástica, sobrepasando el objetivo varias veces.
Gráficas de las variaciones de EasingStyle con una Dirección de Suavizado 'In'. 
Estilo de Suavizado - 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 suavizado a un objeto, con un valor por defecto de Out. Toma en cuenta que una interpolación con estilo de suavizado Lineal no se ve afectada, ya que la interpolación lineal es constante desde el inicio hasta el final.

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

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

Efecto máquina de escribir en texto

Puedes mejorar fácilmente la UI basada en texto, como banners de escenas, instrucciones para jugadores y avisos, con efectos animados. El efecto de "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. Cambia el nombre del 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 caracter por caracter 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

    

    -- Cargar traductor si la experiencia está localizada

    --AnimateUI.loadTranslator()

    

    local message1 = [[Más allá de esta puerta se encuentra 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 mazmora <font color="rgb(255,200,50)">sin oposición!</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