Animation/tweens de l'UI

Dans l'animation, le tweening est le processus de génération de frames intermédiaires entre deux points clés dans une séquence. Lors de la conception d'une interface utilisateur, vous pouvez utiliser le tweening pour faire passer un GuiObject en douceur d'un état à un autre, comme par exemple :

• Augmenter en douceur la taille d'un bouton lorsque l'utilisateur le sélectionne.
• Faire glisser les menus de l'UI à l'intérieur et à l'extérieur des bords de l'écran.
• Animer progressivement une barre de santé entre deux largeurs lorsque l'utilisateur reçoit un bonus de santé.

Tweens à propriété unique

Position

Pour tweener la position d'un GuiObject :

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

Le code suivant déplace un ImageLabel dans un ScreenGui vers le centre exact de l'écran :

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 tweener la taille d'un GuiObject :

1. Déterminez les coordonnées UDim2 pour la taille cible de l'objet, en utilisant les paramètres scale de UDim2 au lieu de valeurs pixel exactes afin que l'objet se déplace vers un pourcentage relatif de la taille de l'écran.
2. Attachez un UIAspectRatioConstraint à l'objet pour maintenir son rapport d'aspect conçu lors du tweening.
3. Passez un TweenInfo et la taille cible à TweenService:Create().
4. Jouez le tween avec Tween:Play().

Le code suivant redimensionne un ImageLabel dans un ScreenGui à 40 % de la largeur ou de la hauteur de l'écran (selon la plus petite) à partir du point d'ancrage central de l'objet :

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 tweener la rotation d'un GuiObject :

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

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

Transparence

Plusieurs propriétés contrôlent la transparence de l'UI, selon le type d'objet. Vous pouvez tweener chacune de ces propriétés individuellement ou combinées via un tween multi-propriété. Alternativement, vous pouvez tweener la transparence globale d'un objet en le plaçant à l'intérieur d'un CanvasGroup et en tweener la GroupTransparency du groupe.

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

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'UI, selon le type d'objet. Vous pouvez tweener chacune de ces propriétés individuellement ou combinées via un tween multi-propriété. Alternativement, vous pouvez tweener la couleur globale d'un objet en le plaçant à l'intérieur d'un CanvasGroup et en tweener la GroupColor3 du groupe.

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

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

Contour

Plusieurs propriétés contrôlent les bordures de l'UI, selon le type d'objet.

Alternativement, vous pouvez appliquer un enfant UIStroke et tweener son épaisseur, sa couleur et/ou sa 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("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 multi-propriété

Vous pouvez combiner n'importe lequel des tweens à propriété unique en tweens plus complexes en passant plusieurs propriétés cibles à TweenService:Create(), par exemple position + rotation ou taille + 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 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()

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 de tweens

Vous pouvez enchaîner des animations UI pour qu'elles se produisent l'une après l'autre en jouant des tweens successifs lors de l'événement Completed du tween précédent. Par exemple, le script suivant déplace un objet vers le centre de l'écran, puis le fait tourner de 45°.

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

-- Jouez d'abord le tween de position
positionTween:Play()

-- Jouez le tween de rotation à la fin du tween de position
positionTween.Completed:Connect(function()
	rotationTween:Play()
end)

Transitions de style

Les objets UI peuvent également être animés par le biais de transitions de style, comparables aux transitions CSS, où une ou plusieurs propriétés de l'UI sont tweenées à travers des définitions de StyleRule. Consultez le guide Style Editor pour plus de détails.

Options d'assouplissement

En utilisant les options d'assouplissement de TweenInfo, vous pouvez contrôler le style et la direction de l'assouplissement des animations UI.

Style

Enum.EasingStyle définit le taux d'interpolation du début à la fin. Par défaut, le style d'assouplissement est défini sur Enum.EasingStyle.Quad.

local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic)
local tween = TweenService:Create(object, tweenInfo, {Rotation = 45})

Direction

Enum.EasingDirection définit comment l'interpolation style d'assouplissement s'applique à un objet, avec un défaut de Out. Notez qu'un tween avec un style d'assouplissement Linéaire n'est pas affecté, car l'interpolation linéaire est constante du début à la fin.

local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic, Enum.EasingDirection.InOut)
local tween = TweenService:Create(object, tweenInfo, {Rotation = 45})

Effet machine à écrire sur le texte

Vous pouvez facilement améliorer l'UI basée sur du texte, comme les bannières de scène, les instructions des joueurs et les invites, avec des effets animés. L'effet "machine à écrire" est idéal pour les TextLabels qui racontent une histoire, affichent des conversations de PNJ, etc.

1. Créez un nouveau ModuleScript dans ReplicatedStorage.

2. Renommez le nouveau script en AnimateUI.

   

3. Collez le code suivant dans le 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
   
   	-- Traduire le texte si possible
   	if translator then
   		displayText = translator:Translate(guiObject, text)
   	end
   
   	-- Remplacer les balises de saut de ligne pour que la boucle de graphe ne manque pas ces caractères
   	displayText = displayText:gsub("<br%s*/>", "\n")
    	-- Supprimer les balises RichText car l'animation caractère par caractère va casser les balises
   	displayText = displayText:gsub("<[^<>]->", "")
   
   	-- Définir le 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 jeu n'est pas l'anglais ("en"), changez le code de locale pour SOURCE_LOCALE afin qu'il corresponde à la langue source dans les paramètres de localisation.

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

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

   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 = [[Au-delà de cette porte se trouve le<br /><font size="46" color="rgb(255,50,25)">Grand Zorgoth...</font> <font size="40">🗡</font>]]
   AnimateUI.typeWrite(label, message1, 0.05)
   
   task.wait(1)
   
   local message2 = [[...qui règne sur ce donjon <font color="rgb(255,200,50)">sans défi !</font> <font size="30">😈</font>]]
   AnimateUI.typeWrite(label, message2, 0.05)