Criações

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 do usuário, você pode usar tweening para fazer a transição de 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 tween 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 de pixel exatos para que o objeto chegue ao 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 tween 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 de pixel exatos para que o objeto chegue a uma porcentagem relativa do tamanho da tela.
  2. Anexe um UIAspectRatioConstraint ao objeto para manter sua proporção projetada ao tweening.
  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 de ancoragem 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 tween a rotação de um GuiObject:

  1. Defina o AnchorPoint para o objeto ao redor do qual ele deve girar.
  2. Determine a Rotação 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 tween cada uma dessas propriedades individualmente ou combiná-las através de um tween de múltiplas propriedades. Alternativamente, você pode tween a transparência geral de um objeto colocando-o dentro de um CanvasGroup e tweenando a GroupTransparency do grupo.

Objeto 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 tween cada uma dessas propriedades individualmente ou combiná-las através de um tween de múltiplas propriedades. Alternativamente, você pode tween a cor geral de um objeto colocando-o dentro de um CanvasGroup e tweenando a GroupColor3 do grupo.

Objeto 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 UIPropriedades
FrameBorderSizePixel, BorderColor3
TextLabelBorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
TextButtonBorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
ImageLabelBorderSizePixel, BorderColor3
ImageButtonBorderSizePixel, BorderColor3

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

Objeto 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 uma única propriedade em tweens mais complexos ao passar 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 gira 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})



-- Reproduza inicialmente 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 da UI são tweened através de definições de StyleRule. Veja o guia do Editor de Estilo para detalhes.

Regra de estado estilizado final 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 da animação da 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
LinearMoven-se a uma velocidade constante.
SineA velocidade é determinada por uma onda senoidal para um movimento suave.
QuadSemelhante a Sine, mas com uma curva ligeiramente mais acentuada baseada em interpolação quadrática.
CubicSemelhante a Quad, mas com uma curva ligeiramente mais acentuada baseada em interpolação cúbica.
QuartSemelhante a Cubic, mas com uma curva ainda mais acentuada baseada em interpolação quartica.
QuintSemelhante a Quart, mas com uma curva ainda mais acentuada baseada em interpolação quintica.
ExponentialA curva mais acentuada baseada em 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 Exponencial.
BackAtinge levemente o alvo, depois se move para trás novamente.
BounceBounce para trás várias vezes após atingir o alvo, antes de finalmente se acomodar.
ElasticMoven-se como se estivesse preso a um elástico, exagerando o alvo várias vezes.
Gráficos das variações de EasingStyle com uma 'In' EasingDirection. 
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 estilo de easing a interpolação 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 no texto

Você pode facilmente aprimorar a interface do usuário baseada em texto, como faixas de cortina, instruções para o jogador e prompts, com efeitos animados. O efeito "máquina de escrever" é ideal para TextLabels que contam uma história, apresentam 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 já que a animação caractere por caractere quebrará as tags

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

    

    	-- Defina o 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 caracteres.

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

    

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

    

    local label = script.Parent

    

    -- Carregar tradutor se a experiência for localizada

    --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 contestação!</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)