Animação de UI/adolescentes

Na animações, transição é 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 transições para transicionar um GuiObject suavemente de um estado para outro, como:

• Aumentar suavemente o tamanho de um botão quando um usuário o seleciona.
• Menus de UI deslizantes dentro e fora dos cantos da tela.
• Animar gradualmente uma barra de saúde entre duas larguras quando um usuário recebe um aumento de saúde.

Adolescentes de propriedade única

Posição

Para transicionar a posição de um : :

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

O seguinte trecho de código 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 reduzir o tamanho de um :

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

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

1. Defina o AnchorPoint.
2. Determine o alvo Rotation para o Objeto.
3. Passe um TweenInfo e a rotação alvo para TweenService:Create().
4. Jogue o pré-adolescente 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 interface de usuário, dependendo do digitarde objeto.Você pode transicionar cada uma dessas propriedades individualmente ou combiná-las através de um transição multi-propriedade.Alternativamente, você pode aumentar a transparência geral de um Objetocolocando-o dentro de um CanvasGroup e transpassando o grupo de GroupTransparency.

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 interface de usuário, dependendo do digitarde objeto.Você pode transicionar cada uma dessas propriedades individualmente ou combiná-las através de um transição multi-propriedade.Alternativamente, você pode tonificar a cor geral de um Objetocolocando-o dentro de um CanvasGroup e tonificando o grupo 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 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 interface de usuário, dependendo do digitarde objeto.

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

UI Tween - Cor e espessura do traço da interface de usuário
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 multifuncionais

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

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 transição

Você pode encadear animações de UI para ocorrer uma após a outra, ao jogar adolescentes subsequentes sobre o evento do interseçãoanterior Completed.Por exemplo, o seguinte script move um objeto para o centro da tela, então o gira em 45°.

Sequência de Tween da Interface de Usuário
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()

-- Jogar transição de rotação após a conclusão da interseçãode posição
positionTween.Completed:Connect(function()
	rotationTween:Play()
end)

Opções de facilitação

Usando as opções de relaxamento de , você pode controlar o estilo de relaxamento e direção de animações de UI.

Estilos

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

Estilo de facilitação - Cúbico
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic)
local tween = TweenService:Create(object, tweenInfo, {Rotation = 45})

Direção

define como a interpolação de estilo de alívio se aplica a um Objeto, com um padrão de Fora .Observe que um pré-adolescente com estilo de alívio Linear não é afetado, pois a interpolação linear é constante de início a terminar/parar/sair.

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

Animar texto

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

Efeito de máquina de escribir

O efeito "máquina de escrever" é ideal para TextLabels que contam uma história, produzem conversas de NPC, etc.

1. Crie um novo ModuleScript dentro de ReplicatedStorage .

2. Renomeie o novo script 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
   
   	-- Traduza o texto se possível
   	if translator then
   		displayText = translator:Translate(guiObject, text)
   	end
   
   	-- Substitua as tags de quebra de linha para que o ciclo gráfico não perca esses caracteres
   	displayText = displayText:gsub("<br%s*/>", "\n")
    	-- Remova as tags RichText pois a animação char-by-char 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 o idioma de origem da sua experiência não for inglês, altere o código local para para combinar com o idioma de origem na configuração de localização.

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

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

   LocalScript
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   local AnimateUI = require(ReplicatedStorage:WaitForChild("AnimateUI"))
   
   local label = script.Parent
   
   -- Carregue o 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)