Animación de UI/Adolescentes

En la animaciones, tweening es el proceso de generación de marcos intermedios entre dos puntos clave en una secuencia. Cuando diseña una interfaz de usuario, puede usar tweening para transitar un GuiObject suavemente desde un estado a otro, como:

• Aumentar lentamente el tamaño de un botón cuando un usuario lo selecciona.
• Menús de UI deslizantes dentro y fuera de los límites de la pantalla.
• Animación de salud progresiva entre dos alturas cuando un usuario recibe un impulso de salud.

Adolescentes de una propiedad

Posición

Para ajustar la posición de un GuiObject :

1. Establece el AnchorPoint para el objeto.
2. Determine UDim2 coordenadas para la posición de objetivo del objeto, utilizando los parámetros de escala Datatype.UDim2 en lugar de valores de píxeles exactos para que el objeto tweens al centro exacto de la pantalla.
3. Pasa un TweenInfo y la posición de destino a TweenService:Create() .
4. Juega con Tween:Play() .

El siguiente código de muestra mueve un ImageLabel dentro de un ScreenGui para el centro exacto de la pantalla:

IU Tween - 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 ajustar el tamaño Class.GuiObject :

1. Determine UDim2 coordenadas para el tamaño del objetivo, usando los parámetros de escala Datatype.UDim2 en lugar de valores de píxeles exactos para que el objeto tweens a un porcentaje relativo del tamaño de la pantalla.
2. Adiciona un UIAspectRatioConstraint al objeto para mantener su aspecto diseñado cuando se ajusta.
3. Pasa un TweenInfo y el tamaño de la etiqueta a TweenService:Create() .
4. Juega con Tween:Play() .

El siguiente código de ejemplo escala un ImageLabel dentro de un ScreenGui para 40% de la altura o ancho de la pantalla (que sea menor) desde el punto de anclaje del objeto:

Interfaz de usuario Tween - 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 ajustar la rotación de un GuiObject :

1. Establece el AnchorPoint para que gire el objeto.
2. Determine el objetivo Rotation para el objeto.
3. Pasa un TweenInfo y la rotación del objetivo a TweenService:Create() .
4. Juega con Tween:Play() .

Interfaz de usuario Tween - 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 targetRotation = 45

local tweenInfo = TweenInfo.new(2)
local tween = TweenService:Create(object, tweenInfo, {Rotation = targetRotation})

tween:Play()

Transparencia

Múltiples propiedades controlan la transparencia de la interfaz de usuario de propiedades, dependiendo del introducirde objeto. Puedes ajustar cada una de estas propiedades individualmente o combinadas a través de un ajuste mult propiedad . Alternativamente, puedes ajustar la transparencia general del objeto colocándolo dentro de un CanvasGroup y ajustando el grupo de su Class.CanvasGroup.GroupTransparency

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

IU Tween - Transparencia del 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()

Color

Multiple propiedades control UI color, dependiendo del introducirde objeto. Puedes tween cada una de estas propiedades individualmente o combinado a través de un multi-propiedad tween . Alternativamente, puedes tween un color de objeto en general por colocarlo dentro de un CanvasGroup y tweening el grupo's GroupColor3 .

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

IU Tween - Color de 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()

Golpe

Múltiples propiedades controlan los límites de las interfaces de usuario, dependiendo del introducirde objeto.

Alternativamente, puede aplicar un UIStroke hijo y tener su grosor, color y/o transparencia.

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

Adolescentes propiedad múltiple

Puedes combinar cualquiera de los tweens de propiedad única en más complejos tweens al pasar varias propiedades de objetivo a TweenService:Create(), por ejemplo, posición + rotación o 2>tamaño + transparencia2>.

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

Interfaz de usuario Tween - 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 Tween

Puedes sincronizar las animaciones de la interfaz de usuario para que ocurran una después de la otra jugando a los siguientes niños en el evento de Completed del niño anterior. Por ejemplo, el siguiente script mueve un objeto al centro de la pantalla, luego lo gira por 45°.

Secuencia de Interfaz de Usuario de 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 jugar posición intermediación/interpolación de movimiento
positionTween:Play()

-- Reproducir la rotación de la tween al completar la intermediación/interpolación de movimientode posición
positionTween.Completed:Connect(function()
	rotationTween:Play()
end)

Opciones de fácil acceso

Al usar las opciones de fácil acceso de TweenInfo, puede controlar el estilo de fácil acceso y la dirección de la animación de la interfaz de usuario.

Estilo

Enum.EasingStyle establece la tasa de interpolación desde el principio hasta finalizar. Por defecto, el estilo de suavizado está configurado como Enum.EasingStyle.Quad .

Estilo de suavización - Cubo
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 el estilo de interpolación fácil a un objeto, con un valor predeterminado de Salir . Nota que un tween con estilo de interpolación 0>lineal0> no está afectado, ya que el estilo de interpolación lineal es constante desde el principio hasta finalizar.

Dirección de fácil acceso - InOut
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic, Enum.EasingDirection.InOut)
local tween = TweenService:Create(object, tweenInfo, {Rotation = 45})

Texto de Animación

Puede mejorar fácilmente la interfaz de usuario basada en texto, como los banners de cutscene, las instrucciones del jugador y las solicitudes, con efectos animados.

Efecto de escribidor mecánico

El efecto de "tipo escribidor" es ideal para TextLabels que cuentan una historia, salen de diálogo de NPC, etc.

1. Crear un nuevo ModuleScript dentro de Almacenamiento Replicado .

2. Renombrar el nuevo script AnimateUI .

   

3. Pega el siguiente código en el script:

   ModuleScript - Interfaz de usuario de animación
   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
   
   	-- Traducir el texto si es posible
   	if translator then
   		displayText = translator:Translate(guiObject, text)
   	end
   
   	-- Reemplace los elementos de la línea para que el ciclo de gráficos no se pierda esos personajes
   	displayText = displayText:gsub("<br%s*/>", "\n")
    	-- Elimina las etiquetas RichText ya que la animación de char-by-char romperá las etiquetas
   	displayText = displayText:gsub("<[^<>]->", "")
   
   	-- Establecer 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

   Si la lengua de origen de tu experiencia no es inglés ( "en" ) cambia el código de idioma para "en" para igualar el lenguaje de origen en SOURCE_LOCALE .

4. Crea un TextLabel en una ubicación adecuada, como dentro de un ScreenGui padre de StarterGui .

5. Inserta un nuevo LocalScript como hijo directo de la etiqueta y pegar en el siguiente código. Nota que cada mensaje es un resultado al llamar AnimateUI.typeWrite() con parámetros para el objeto padre, la cadena para Saliday el retraso entre caracteres.

   Script local
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   local AnimateUI = require(ReplicatedStorage:WaitForChild("AnimateUI"))
   
   local label = script.Parent
   
   -- Cargar traductor si el juego está 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)