Animation d'interface utilisateur/ados

En animations, l'animation est le processus de génération de cadres intermédiaires entre deux points clés dans une séquence.Lors de la conception d'une interface utilisateur, vous pouvez utiliser le transitionnement pour transiter doucement d'un état à un autre, comme :

• Augmentation progressive de la taille d'un bouton lorsqu'un utilisateur le sélectionne.
• Menus d'interface glissants à l'intérieur et à l'extérieur des bords de l'écran.
• Animer progressivement une barre de santé entre deux largeurs lorsqu'un utilisateur reçoit un boost de santé.

Adolescents à une seule propriété

Position

Pour passer la position de GuiObject :

1. Définissez le AnchorPoint pour l'objet.
2. Déterminez UDim2 les coordonnées pour la position cible de l'objet, en utilisant les paramètres échelle de UDim2 au lieu des valeurs de pixels exacts afin que l'objet adolescent se déplace vers le centre exact de l'écran.
3. Passez un TweenInfo et la position cible à TweenService:Create().
4. Jouez avec l'adolescent avec Tween:Play() .

Le fragment de code suivant déplace un ImageLabel à l'intérieur d'un ScreenGui au centre exact de l'écran :

Tween d'interface utilisateur - Position
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()

Taille

Pour diviser la taille de une GuiObject :

1. Déterminez UDim2 les coordonnées pour la taille cible de l'objet, en utilisant les paramètres échelle de UDim2 au lieu des valeurs de pixels exacts afin que l'objet passe à un pourcentage relatif de la taille de l'écran.
2. Attachez un UIAspectRatioConstraint à l'objet pour maintenir sa proportion aspect conçue lors du passage à l'adolescence.
3. Passez un TweenInfo et la taille cible à TweenService:Create().
4. Jouez avec l'adolescent avec Tween:Play() .

Le fragment de code suivant met à l'échelle un ImageLabel dans une ScreenGui à 40% de la largeur ou de la hauteur de l'écran (cela qui est le plus petit) à partir du point d'ancrage du centre de l'objet :

Tween d'interface utilisateur - Taille
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()

Rotation

Pour faire pivoter la rotation d'un GuiObject :

1. Définissez le AnchorPoint pour l'objet à tourner autour.
2. Déterminez la cible Rotation pour l'objet.
3. Passez un TweenInfo et la rotation cible à TweenService:Create().
4. Jouez avec l'adolescent avec Tween:Play() .

Tween d'interface utilisateur - Taille
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()

透明ité transparence

Plusieurs propriétés contrôlent la transparence de l'interface utilisateur, en fonction du taperd'objet.Vous pouvez faire varier chacune de ces propriétés individuellement ou combiner à travers une transition multiple de propriété .Alternativement, vous pouvez modifier la transparence globale d'un objet en le plaçant à l'intérieur d'un CanvasGroup et en transférant le groupe GroupTransparency.

UI Tween - Transparence de l'image
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 - Transparence du groupe de toile
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()

Couleur

Plusieurs propriétés contrôlent la couleur de l'interface utilisateur, en fonction du taperd'objet.Vous pouvez faire varier chacune de ces propriétés individuellement ou combiner à travers une transition multiple de propriété .Alternativement, vous pouvez atténuer la couleur globale d'un objet en le plaçant à l'intérieur d'un CanvasGroup et en atténuant la couleur du groupe GroupColor3.

UI Tween - Couleur de l'image
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 - Couleur du groupe de toile
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()

Courbe

Plusieurs propriétés contrôlent les bordures de l'interface utilisateur, en fonction du taperd'objet.

Alternativement, vous pouvez appliquer un enfant UIStroke et tweener sa taille, sa couleur et/ou sa transparence.

UI Tween - Couleur et épaisseur du contour de l'interface utilisateur
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()

Adolescents à plusieurs propriétés

Vous pouvez combiner n'importe lequel des adolescents à une seule propriété dans des adolescents plus complexes en passant plusieurs propriétés cibles à TweenService:Create() , par exemple position + rotation ou taille + transparence .

Interface utilisateur adolescente - Position et rotation
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()

Interface utilisateur adolescente - Taille et transparence
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()

Séquences d'adolescent

Vous pouvez relier des animations d'interface utilisateur pour se produire les unes après les autres en jouant des tweens suivants sur l'événement du précédent tween Completed.Par exemple, le script suivant déplace un objet au centre de l'écran, puis le fait pivoter de 45°.

Séquence d'adolescent UI
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})

-- Jouer initialement la position tween
positionTween:Play()

-- Jouer une rotation d'écran à la fin de la tweende position
positionTween.Completed:Connect(function()
	rotationTween:Play()
end)

Options d'allègement

En utilisant les options d'assouplissement de , vous pouvez contrôler l'assouplissement du style et de la direction des animations d'interface utilisateur.

Style

Enum.EasingStyle définit le taux d'interpolation du début à terminer. Par défaut, le style de relâchement est défini à Enum.EasingStyle.Quad .

Style d'allègement - Cubique
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic)
local tween = TweenService:Create(object, tweenInfo, {Rotation = 45})

Diréction

définit comment l'interpolation du style de relâchement s'applique à un objet, avec une valeur par défaut de Out .Remarquez qu'un adolescent avec un style d'amortissement linéaire Linear n'est pas affecté, car l'interpolation linéaire est constante du début à terminer.

Direction d'allègement - InOut
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic, Enum.EasingDirection.InOut)
local tween = TweenService:Create(object, tweenInfo, {Rotation = 45})

Animer le texte

Vous pouvez facilement améliorer l'interface utilisateur basée sur le texte, telle que les bannières de scène coupée, les instructions du joueur et les invites, avec des effets animés.

Effet de la machine à écrire

L'effet "machine à écrire" est idéal pour TextLabels ceux qui racontent une histoire, produisent des conversations de PNJ, etc.

1. Créez un nouveau ModuleScript dans ReplicatedStorage .

2. Renommer le nouveau script AnimateUI .

   

3. Collez le code suivant dans le script :

   ModuleScript - Animation d'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
   
   	-- Translatez le texte si possible
   	if translator then
   		displayText = translator:Translate(guiObject, text)
   	end
   
   	-- Remplacer les balises de rupture de ligne afin que la boucle graphique ne manque pas ces caractères
   	displayText = displayText:gsub("<br%s*/>", "\n")
    	-- Supprimer les balises RichText car l'animation char-by-char brisera les balises
   	displayText = displayText:gsub("<[^<>]->", "")
   
   	-- Définir un texte traduit/modifié sur le parent
   	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 langue source de votre expérience n'est pas l'anglais ( ), modifiez le code local pour correspondre à la langue source dans les paramètres de localisation .

4. Créez un TextLabel à un endroit approprié, comme dans un ScreenGui parenté à StarterGui .

5. Insérez un nouveau LocalScript comme enfant direct du label et collez le code suivant.Notez que chaque message est produit en appelant AnimateUI.typeWrite() avec des paramètres pour l'objet parent, la chaîne à sortieet le délai entre les caractères.

   Lecteur localScript
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   local AnimateUI = require(ReplicatedStorage:WaitForChild("AnimateUI"))
   
   local label = script.Parent
   
   -- Charger le traducteur si le jeu est localisé
   --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)