Animação da Interface/Adolescentes

Na animações, tweening é o processo de geração de 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 sem problemas de um estado para outro, como:

• Suavizar o tamanho de um botão quando um usuário selecioná-lo.
• Navegação de UI deslizante na borda da tela.
• Animação gradual de uma barra de saúde entre duas larguras quando um usuário recebe um boost de saúde.

Adolescentes de Propriedade Única

Posição

Para ajustar a posição de um GuiObject:

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

O seguinte código de exemplo move um ImageLabel dentro de um ScreenGui para o centro exato 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 ajustar o tamanho do tamanho de um GuiObject :

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

O seguinte código de exemplo escala um ImageLabel dentro de um ScreenGui para 40% da largura ou altura da tela (que for menor) do ponto de ancoragem 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 ajustar a rotação de um GuiObject:

1. Definir o AnchorPoint para que o objeto gire em torno.
2. Determine o alvo Rotation para o Objeto.
3. Passe um TweenInfo e a rotação do alvo para TweenService:Create().
4. Jogue 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

A interface de controle de propriedades múltiplas controla a transparência da UI da propriedade, dependendo do digitarde objeto. Você pode ajustar cada uma dessas propriedades individualmente ou combinadas através de um multijogar propriedade tween. Alternativamente, você pode ajustar a transparência geral do Objetocolocando-o dentro de um CanvasGroup e tweening o grupo's

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 - Visibilidade 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

A cor da tela de controle de propriedades múltiplas depende do digitarde objeto. Você pode ajustar cada uma dessas propriedades individualmente ou combinado através de uma interface de controle de propriedades múltipla. Alternativamente, você pode ajustar a cor geral de um Objetocolocando-o dentro de um CanvasGroup e ajustando a cor do grupo Class.CanvasGroup.GroupColor3

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

Pontuação

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

Alternativamente, você pode aplicar uma criança UIStroke e ajustar sua espessura, cor e/ou transparência.

UI Tween - Cor e Espessura 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()

Adolescentes de Propriedade Múltipla

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

UI Tween - Posição e 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 e 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 sincronizar animações de UI para ocorrer uma após a outra jogando um menino seguinte no evento Completed do interseçãoanterior. Por exemplo, o seguinte script move um objeto para o centro da tela, então gira-o em 45°.

Sequência de Criação de Botões
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 jogar posição interseção
positionTween:Play()

-- Jogue a rotação de ajuste ao completar a interseçãode posição
positionTween.Completed:Connect(function()
	rotationTween:Play()
end)

Opções de Ajuste

Usando as opções de facilitação de TweenInfo, você pode controlar o estilo de fácil e direção das animações da UI.

Estilo

Enum.EasingStyle define a taxa de interpolação de início até o terminar/parar/sair. Por padrão, o estilo de interpolação é definido como Enum.EasingStyle.Quad.

Estilo de Aplainar - Cúbico
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 de estilo de fácil aplica-se a um Objeto, com um padrão de Saída . Observe que uma tween com estilo de 0>linha0> não é afetada, pois a interpolação de linha é constante do começo ao terminar/parar/sair.

Direção de Acolchego - InOut
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic, Enum.EasingDirection.InOut)
local tween = TweenService:Create(object, tweenInfo, {Rotation = 45})

Texto Animado

Você pode facilmente melhorar a interface baseada em texto, como banners de cutscene, instruções de jogador e prompts, com efeitos animados.

Efeito de Tipo

O efeito "tipo escrivel" é ideal para TextLabels que contam uma história, produzem diálogos de NPC, etc.

1. Crie um novo ModuleScript dentro de ReplicatedStorage .

2. Renomeie o novo script AnimateUI .

   

3. Paste o seguinte código no script:

   ModuleScript - Animação 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
   
   	-- Traduzir o texto se possível
   	if translator then
   		displayText = translator:Translate(guiObject, text)
   	end
   
   	-- Substituir linhas quebradas para que o loop de gráficos não perca esses caracteres
   	displayText = displayText:gsub("<br%s*/>", "\n")
    	-- Remova as tags RichText, pois a animação char-by-char irá 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

   Se a linguagem de origem de sua experiência não for inglês ( "en" , altere o código de localização para "en" para corresponder à linguagem de origem em SOURCE_LOCALE .

4. Crie um TextLabel em um local adequado, como dentro de um ScreenGui paiado para StarterGui .

5. Insira um novo LocalScript como filho direto da etiqueta e cole no seguinte código. Observe que cada mensagem é uma saída por chamar AnimateUI.typeWrite() com parâmetros para o Objetopai, a string para sair e o atraso entre os caracteres.

   Script Local
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   local AnimateUI = require(ReplicatedStorage:WaitForChild("AnimateUI"))
   
   local label = script.Parent
   
   -- Carregar tradutor se o jogo for localizado
   --AnimateUI.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)