UI-Animation/Tweens

In der Animation ist Tweening der Prozess, bei dem Zwischenbilder zwischen zwei Schlüsselpositionen in einer Sequenz generiert werden. Bei der Gestaltung einer Benutzeroberfläche können Sie Tweening verwenden, um ein GuiObject sanft von einem Zustand in einen anderen zu überführen, wie zum Beispiel:

• Die Größe eines Buttons sanft zu erhöhen, wenn ein Benutzer ihn auswählt.
• UI-Menüs von den Bildschirmrändern ein- und auszublenden.
• Eine Gesundheitsanzeige allmählich zwischen zwei Breiten zu animieren, wenn ein Benutzer einen Gesundheitsboost erhält.

Einzelne Property-Tweens

Position

Um die Position eines GuiObject zu tween:

1. Setzen Sie den AnchorPoint für das Objekt.
2. Bestimmen Sie die UDim2-Koordinaten für die Zielposition des Objekts, indem Sie die Skalierungs-Parameter von UDim2 anstelle von genauen Pixelwerten verwenden, damit das Objekt genau in die Mitte des Bildschirms tweened.
3. Übergeben Sie ein TweenInfo und die Zielposition an TweenService:Create().
4. Spielen Sie das Tween mit Tween:Play() ab.

Der folgende Code-Schnipsel bewegt ein ImageLabel innerhalb eines ScreenGui genau in die Mitte des Bildschirms:

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

Größe

Um die Größe eines GuiObject zu tween:

1. Bestimmen Sie die UDim2-Koordinaten für die Zielgröße des Objekts, indem Sie die Skalierungs-Parameter von UDim2 anstelle von genauen Pixelwerten verwenden, damit das Objekt zu einem relativen Prozentsatz der Bildschirmgröße tweened.
2. Fügen Sie dem Objekt eine UIAspectRatioConstraint hinzu, um das entworfene Seitenverhältnis beim Tweening beizubehalten.
3. Übergeben Sie ein TweenInfo und die Zielgröße an TweenService:Create().
4. Spielen Sie das Tween mit Tween:Play() ab.

Der folgende Code-Schnipsel skaliert ein ImageLabel innerhalb eines ScreenGui auf 40 % der Bildschirmbreite oder -höhe (je nachdem, was kleiner ist) von dem Mittelpunkt des Objekts:

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

Um die Rotation eines GuiObject zu tween:

1. Setzen Sie den AnchorPoint für das Objekt, um darum zu rotieren.
2. Bestimmen Sie die Ziel-Rotation für das Objekt.
3. Übergeben Sie ein TweenInfo und die Zielrotation an TweenService:Create().
4. Spielen Sie das Tween mit Tween:Play() ab.

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

Transparenz

Mehrere Eigenschaften steuern die UI-Transparenz, abhängig vom Objekttyp. Sie können jede dieser Eigenschaften einzeln oder kombiniert durch einen Multi-Property-Tween tween. Alternativ können Sie die gesamte Transparenz eines Objekts tween, indem Sie es in eine CanvasGroup einfügen und die GroupTransparency der Gruppe 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")

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

Farbe

Mehrere Eigenschaften steuern die UI-Farbe, abhängig vom Objekttyp. Sie können jede dieser Eigenschaften einzeln oder kombiniert durch einen Multi-Property-Tween tween. Alternativ können Sie die gesamte Farbe eines Objekts tween, indem Sie es in eine CanvasGroup einfügen und die GroupColor3 der Gruppe 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")

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

Strich

Mehrere Eigenschaften steuern die UI-Ränder, abhängig vom Objekttyp.

Alternativ können Sie ein UIStroke-Kind anwenden und dessen Dicke, Farbe und/oder Transparenz 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("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()

Multi-Property-Tweens

Sie können beliebige der einzelnen Property-Tweens zu komplexeren Tweens kombinieren, indem Sie mehrere Ziel-Eigenschaften an TweenService:Create() übergeben, zum Beispiel Position + Rotation oder Größe + Transparenz.

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

Tween-Sequenzen

Sie können UI-Animationen verketten, sodass sie nacheinander ablaufen, indem Sie nachfolgende Tweens beim Completed-Ereignis des vorherigen Tweens abspielen. Zum Beispiel bewegt das folgende Skript ein Objekt in die Mitte des Bildschirms und rotiert es dann um 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})

-- Zunächst das Positionstween abspielen
positionTween:Play()

-- Rotationstween nach Abschluss des Positionstweens abspielen
positionTween.Completed:Connect(function()
	rotationTween:Play()
end)

Stilübergänge

UI-Objekte können auch durch Stilübergänge animiert werden, die vergleichbar sind mit CSS-Übergängen, bei denen eine oder mehrere UI-Eigenschaften durch StyleRule-Definitionen tweened werden. Siehe den Leitfaden Style Editor für Details.

Easing-Optionen

Mit den Easing-Optionen von TweenInfo können Sie den Easing-Stil und die Richtung von UI-Animationen steuern.

Stil

Enum.EasingStyle legt die Interpolationsrate von Anfang bis Ende fest. Standardmäßig ist der Easing-Stil auf Enum.EasingStyle.Quad eingestellt.

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

Richtung

Enum.EasingDirection definiert, wie die Easing-Stil-Interpolation auf ein Objekt angewendet wird, mit einem Standard von Out. Beachten Sie, dass ein Tween mit Linear Easing-Stil nicht betroffen ist, da die lineare Interpolation konstant von Anfang bis Ende ist.

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

Schreibmaschinen-Effekt bei Text

Sie können textbasierte UI, wie z.B. Cutscene-Banner, Spieleranweisungen und Eingabeaufforderungen, leicht mit animierten Effekten verbessern. Der "Schreibmaschinen"-Effekt ist ideal für TextLabels, die eine Geschichte erzählen, NPC-Gespräche ausgeben usw.

1. Erstellen Sie ein neues ModuleScript innerhalb von ReplicatedStorage.

2. Benennen Sie das neue Skript in AnimateUI um.

   

3. Fügen Sie den folgenden Code in das Skript ein:

   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
   
   	-- Übersetzen Sie den Text, wenn möglich
   	if translator then
   		displayText = translator:Translate(guiObject, text)
   	end
   
   	-- Ersetzen Sie Zeilenumbruch-Tags, damit die Graphem-Schleife diese Zeichen nicht verpasst
   	displayText = displayText:gsub("<br%s*/>", "\n")
    	-- Entfernen Sie RichText-Tags, da die Zeichen-für-Zeichen-Animation die Tags brechen würde
   	displayText = displayText:gsub("<[^<>]->", "")
   
   	-- Setzen Sie den übersetzten/ändernden Text auf das Elternobjekt
   	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

   Wenn die Quellsprache Ihres Spiels nicht Englisch ("en") ist, ändern Sie den Sprachcode für SOURCE_LOCALE, um mit der Quellsprache in den Lokalisierungseinstellungen übereinzustimmen.

4. Erstellen Sie ein TextLabel an einem geeigneten Ort, z.B. innerhalb eines ScreenGui, das zu StarterGui gehört.

5. Fügen Sie ein neues LocalScript als direktes Kind des Labels hinzu und fügen Sie den folgenden Code ein. Beachten Sie, dass jede Nachricht ausgegeben wird, indem AnimateUI.typeWrite() mit Parametern für das Elternobjekt, den auszugebenden String und die Verzögerung zwischen den Zeichen aufgerufen wird.

   LocalScript

   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   local AnimateUI = require(ReplicatedStorage:WaitForChild("AnimateUI"))
   
   local label = script.Parent
   
   -- Übersetzer laden, wenn das Spiel lokalisiert ist
   --AnimateUI.loadTranslator()
   
   local message1 = [[Jenseits dieser Tür ist der<br /><font size="46" color="rgb(255,50,25)">Große Zorgoth...</font> <font size="40">🗡</font>]]
   AnimateUI.typeWrite(label, message1, 0.05)
   
   task.wait(1)
   
   local message2 = [[...der dieses Verlies <font color="rgb(255,200,50)">ungefordert regiert!</font> <font size="30">😈</font>]]
   AnimateUI.typeWrite(label, message2, 0.05)