TweenService est l'outil qui rend ton jeu fluide et vivant. Plutôt que de déplacer brutalement un objet d'un point A à un point B, un tween anime la transition en douceur : une porte qui s'ouvre, un bouton qui pulse, une plateforme qui monte. C'est la différence entre un jeu qui paraît amateur et un jeu qui paraît soigné.
Un tween se définit en trois temps : l'objet à animer, un TweenInfo (durée, style d'accélération, répétitions) et la cible (les propriétés finales). Tu peux animer presque n'importe quelle propriété numérique : position, taille, transparence, couleur, rotation via CFrame.
🎬 TweenService — Base
local TweenService = game:GetService("TweenService")
local part = workspace.MaPart
-- 1. TweenInfo : durée, easing, direction, répétitions, yoyo, délai
local info = TweenInfo.new(
2, -- durée (secondes)
Enum.EasingStyle.Quad, -- style
Enum.EasingDirection.Out -- direction
)
-- 2. Propriétés cibles
local cibles = { Position = Vector3.new(10, 5, 0) }
-- 3. Créer + jouer
local tween = TweenService:Create(part, info, cibles)
tween:Play()🎨 Animer couleur & transparence
local info = TweenInfo.new(1.5)
-- Changer la couleur
TweenService:Create(part, info, {
Color = Color3.fromRGB(255, 0, 0)
}):Play()
-- Changer la transparence
TweenService:Create(part, info, {
Transparency = 1 -- 0 = opaque, 1 = invisible
}):Play()
-- Changer la taille
TweenService:Create(part, info, {
Size = Vector3.new(8, 8, 8)
}):Play()🔄 Contrôle du Tween
local tween = TweenService:Create(part, info, cibles)
tween:Play() -- démarrer
tween:Pause() -- mettre en pause
tween:Cancel() -- annuler et réinitialiser
-- Détecter la fin
tween.Completed:Connect(function(state)
if state == Enum.PlaybackState.Completed then
print("Tween terminé !")
end
end)
-- Attendre la fin (yield)
tween:Play()
tween.Completed:Wait()
print("Fini !")📊 EasingStyle & Direction
| EasingStyle | Effet |
|---|---|
Linear | Vitesse constante |
Quad | Lisse (recommandé) |
Sine | Sinusoïdal doux |
Back | Rebond en arrière |
Bounce | Rebond à la fin |
Elastic | Effet élastique |
Exponential | Très rapide → lent |
| Direction | Signification |
|---|---|
In | Accélère au début |
Out | Décélère à la fin |
InOut | Les deux |
🔁 Répétitions & Yoyo
-- TweenInfo complet (tous les paramètres)
local info = TweenInfo.new(
1, -- durée
Enum.EasingStyle.Sine, -- style
Enum.EasingDirection.InOut, -- direction
-1, -- répétitions (-1 = infini)
true, -- yoyo (retour automatique)
0 -- délai entre répétitions
)
-- Pulsation infinie
TweenService:Create(part, info, {
Size = Vector3.new(6, 6, 6)
}):Play()🔀 Rotation CFrame
-- Rotation avec CFrame.Angles (radians)
local info = TweenInfo.new(2, Enum.EasingStyle.Quad)
TweenService:Create(part, info, {
CFrame = CFrame.new(part.Position)
* CFrame.Angles(
0,
math.rad(180), -- Y : demi-tour
0
)
}):Play()
-- Combiné position + rotation
TweenService:Create(part, info, {
CFrame = CFrame.new(10, 5, 0)
* CFrame.Angles(0, math.rad(90), 0)
}):Play()✅ Bonnes pratiques & erreurs fréquentes
- Anime sur le client quand c'est purement visuel : un tween décoratif n'a pas besoin de tourner sur le serveur et d'être répliqué.
EasingStyle.Linearpour les boucles infinies (rotation continue) : les autres styles accélèrent/ralentissent et rendent la boucle saccadée.- Attends la fin avec
tween.Completed:Wait()avant de détruire un objet, sinon il disparaît avant la fin de l'animation. - Ne mélange pas tween et modification manuelle de la même propriété en même temps : tu obtiens des conflits visuels imprévisibles.