Animação de UI/tweens

*Este conteúdo é traduzido por IA (Beta) e pode conter erros. Para ver a página em inglês, clique aqui.

Na animação, tweening é o processo de gerar quadros intermediários entre dois pontos-chave em uma sequência. Ao projetar uma interface de usuário, você pode usar tweening para transitar um GuiObject suavemente de um estado para outro, como:

  • Aumentar suavemente o tamanho de um botão quando um usuário o seleciona.
  • Deslizar menus de UI para dentro e para fora das bordas da tela.
  • Animar gradualmente uma barra de saúde entre duas larguras quando um usuário recebe um aumento de saúde.

Tweens de única propriedade

Posição

Para tweenar a posição de um GuiObject:

  1. Defina o AnchorPoint para o objeto.
  2. Determine as coordenadas UDim2 para a posição alvo do objeto, usando os parâmetros de escala de UDim2 em vez de valores exatos em pixels, para que o objeto tween para o exato centro da tela.
  3. Passe um TweenInfo e a posição alvo para TweenService:Create().
  4. Reproduza o tween com Tween:Play().

O seguinte trecho de código move um ImageLabel dentro de um ScreenGui para o exato centro da tela:

UI Tween - Posiçã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 targetPosition = UDim2.new(0.5, 0, 0.5, 0)



local tweenInfo = TweenInfo.new(2)

local tween = TweenService:Create(object, tweenInfo, {Position = targetPosition})



tween:Play()

Tamanho

Para tweenar o tamanho de um GuiObject:

  1. Determine as coordenadas UDim2 para o tamanho alvo do objeto, usando os parâmetros de escala de UDim2 em vez de valores exatos em pixels, para que o objeto tween para uma porcentagem relativa do tamanho da tela.
  2. Anexe um UIAspectRatioConstraint ao objeto para manter sua proporção de aspecto projetada ao tweenar.
  3. Passe um TweenInfo e o tamanho alvo para TweenService:Create().
  4. Reproduza o tween com Tween:Play().

O seguinte trecho de código escala um ImageLabel dentro de um ScreenGui para 40% da largura ou altura da tela (o que for menor) a partir do ponto âncora central do objeto:

UI Tween - Tamanho
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()

Rotação

Para tweenar a rotação de um GuiObject:

  1. Defina o AnchorPoint para o objeto ao redor do qual ele irá rotacionar.
  2. Determine a Rotation alvo para o objeto.
  3. Passe um TweenInfo e a rotação alvo para TweenService:Create().
  4. Reproduza o tween com Tween:Play().
UI Tween - Tamanho
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()

Transparência

Múltiplas propriedades controlam a transparência da UI, dependendo do tipo de objeto. Você pode tweenar cada uma dessas propriedades individualmente ou combinadas através de um tween de múltiplas propriedades. Alternativamente, você pode tweenar a transparência geral de um objeto colocando-o dentro de um CanvasGroup e tweenando a GroupTransparency do grupo.

Objeto de UIPropriedades
FrameBackgroundTransparency
TextLabelBackgroundTransparency, TextTransparency, TextStrokeTransparency
TextButtonBackgroundTransparency, TextTransparency, TextStrokeTransparency
ImageLabelBackgroundTransparency, ImageTransparency
ImageButtonBackgroundTransparency, ImageTransparency
UI Tween - Transparência da Imagem
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 - Transparência do Grupo de 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()

Cor

Múltiplas propriedades controlam a cor da UI, dependendo do tipo de objeto. Você pode tweenar cada uma dessas propriedades individualmente ou combinadas através de um tween de múltiplas propriedades. Alternativamente, você pode tweenar a cor geral de um objeto colocando-o dentro de um CanvasGroup e tweenando a GroupColor3 do grupo.

Objeto de UIPropriedades
FrameBackgroundColor3, BorderColor3
TextLabelBackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
TextButtonBackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
ImageLabelBackgroundColor3, BorderColor3, ImageColor3
ImageButtonBackgroundColor3, BorderColor3, ImageColor3
UI Tween - Cor da Imagem
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 - Cor do Grupo de 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()

Traço

Múltiplas propriedades controlam as bordas da UI, dependendo do tipo de objeto.

Objeto de UIPropriedades
FrameBorderSizePixel, BorderColor3
TextLabelBorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
TextButtonBorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
ImageLabelBorderSizePixel, BorderColor3
ImageButtonBorderSizePixel, BorderColor3

Alternativamente, você pode aplicar um filho UIStroke e tweenar sua espessura, cor e/ou transparência.

Objeto de UIPropriedades
UIStrokeColor, Thickness, Transparency
UI Tween - Cor & Espessura do 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últiplas propriedades

Você pode combinar qualquer um dos tweens de única propriedade em tweens mais complexos, passando várias propriedades alvo para TweenService:Create(), por exemplo posição + rotação ou tamanho + transparência.

UI Tween - Posição & Rotaçã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 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 - Tamanho & Transparência
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()

Sequências de Tween

Você pode encadear animações de UI para ocorrerem uma após a outra, reproduzindo tweens subsequentes após o evento Completed do tween anterior. Por exemplo, o seguinte script move um objeto para o centro da tela e, em seguida, o rotaciona em 45°.

Sequência 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})



-- Inicialmente reproduza o tween de posição

positionTween:Play()



-- Reproduza o tween de rotação após a conclusão do tween de posição

positionTween.Completed:Connect(function()

	rotationTween:Play()

end)

Transições de estilo

Objetos de UI também podem ser animados através de transições de estilo, comparáveis às transições CSS, onde uma ou mais propriedades de UI são tweenadas através de definições de StyleRule. Consulte o guia do Editor de Estilo para detalhes.

Regra de estado final estilizada no Editor de Estilo.

Opções de easing

Usando as opções de easing de TweenInfo, você pode controlar o estilo e a direção do easing das animações de UI.

Estilo

Enum.EasingStyle define a taxa de interpolação do início ao fim. Por padrão, o estilo de easing é definido como Enum.EasingStyle.Quad.

EstiloDescrição
LinearMove a uma velocidade constante.
SineA velocidade é determinada por uma onda senoidal para um movimento de easing suave.
QuadSemelhante ao Sine, mas com uma curva ligeiramente mais acentuada baseada na interpolação quadrática.
CubicSemelhante ao Quad, mas com uma curva ligeiramente mais acentuada baseada na interpolação cúbica.
QuartSemelhante ao Cubic, mas com uma curva ainda mais acentuada baseada na interpolação quartica.
QuintSemelhante ao Quart, mas com uma curva ainda mais acentuada baseada na interpolação quintica.
ExponentialA curva mais acentuada baseada na interpolação exponencial.
CircularSegue um arco circular, de modo que a aceleração é mais súbita e a desaceleração mais gradual em comparação com Quint ou Exponential.
BackLevemente ultrapassa o alvo, depois volta para o lugar.
BounceSalta para trás várias vezes após alcançar o alvo, antes de finalmente se estabilizar.
ElasticMove como se estivesse preso a um elástico, ultrapassando o alvo várias vezes.
Gráficos das variações de EasingStyle com uma 'EasingDirection' de 'In'.
Estilo de Easing - Cubic
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic)

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

Direção

Enum.EasingDirection define como a interpolação do estilo de easing se aplica a um objeto, com um padrão de Out. Observe que um tween com estilo de easing Linear não é afetado, pois a interpolação linear é constante do início ao fim.

DireçãoDescrição
InO estilo de easing se aplica em uma direção para frente.
OutO estilo de easing se aplica em uma direção reversa.
InOutO estilo de easing se aplica para frente na primeira metade e em reversa na segunda metade.
Direção de Easing - InOut
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic, Enum.EasingDirection.InOut)

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

Efeito de máquina de escrever em texto

Você pode facilmente aprimorar a UI baseada em texto, como banners de cenas, instruções de jogadores e prompts, com efeitos animados. O efeito "máquina de escrever" é ideal para TextLabels que contam uma história, exibem conversas de NPCs, etc.

  1. Crie um novo ModuleScript dentro de ReplicatedStorage.

  2. Renomeie o novo script para AnimateUI.

  3. Cole o seguinte código no 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

    

    	-- Traduzir texto se possível

    	if translator then

    		displayText = translator:Translate(guiObject, text)

    	end

    

    	-- Substituir tags de quebra de linha para que o loop de grafemas não perca esses caracteres

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

     	-- Remover tags RichText, pois a animação caractere por caractere quebrará as tags

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

    

    	-- Definir texto traduzido/modificado no pai

    	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. Crie um TextLabel em um local adequado, como dentro de um ScreenGui parentado a StarterGui.

  5. Insira um novo LocalScript como um filho direto do rótulo e cole o seguinte código. Observe que cada mensagem é exibida chamando AnimateUI.typeWrite() com parâmetros para o objeto pai, a string a ser exibida e o atraso entre os caracteres.

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

    

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

    

    local label = script.Parent

    

    -- Carregar tradutor se o jogo estiver localizado

    --AnimateUI.loadTranslator()

    

    local message1 = [[Além desta porta está o<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 = [[...que governa esta masmorra <font color="rgb(255,200,50)">sem ser desafiado!</font> <font size="30">😈</font>]]

    AnimateUI.typeWrite(label, message2, 0.05)
©2026 Roblox Corporation, Roblox, o logotipo Roblox e Powering Imagination estão entre nossas marcas registradas e não registradas nos EUA e em outros países.
Termos·Privacidade·Acessibilidade·Suporte
Português (Brasil)