Creator

UI-Animation/Übergänge

*Dieser Inhalt wurde mit KI (Beta) übersetzt und kann Fehler enthalten. Um diese Seite auf Englisch zu sehen, klicke hier.

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 Bildschirmkanten ein- und auszuschieben.
  • Eine Gesundheitsanzeige zwischen zwei Breiten allmählich zu animieren, wenn ein Benutzer einen Gesundheitsboost erhält.

Einzelne Übergänge

Position

Um die Position eines GuiObject zu tween:

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

Der folgende Codeausschnitt bewegt ein ImageLabel innerhalb eines ScreenGui zur genauen Mitte des Bildschirms:

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

Größe

Um die Größe eines GuiObject zu tween:

  1. Bestimmen Sie UDim2 Koordinaten für die Zielgröße des Objekts, wobei Sie die Skalen-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 einen UIAspectRatioConstraint hinzu, um das entworfene Seitenverhältnis beim Tweening beizubehalten.
  3. Übergeben Sie einen TweenInfo und die Zielgröße an TweenService:Create().
  4. Spielen Sie den Tween mit Tween:Play().

Der folgende Codeausschnitt skaliert ein ImageLabel innerhalb eines ScreenGui auf 40% der Bildschirmbreite oder -höhe (je nachdem, was kleiner ist) vom Ankerpunkt des Objekts aus:

UI Tween - Größe
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 einen TweenInfo und die Zielrotation an TweenService:Create().
  4. Spielen Sie den Tween mit Tween:Play().
UI Tween - Größe
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 über 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.

UI-ObjektEigenschaften
FrameBackgroundTransparency
TextLabelBackgroundTransparency, TextTransparency, TextStrokeTransparency
TextButtonBackgroundTransparency, TextTransparency, TextStrokeTransparency
ImageLabelBackgroundTransparency, ImageTransparency
ImageButtonBackgroundTransparency, ImageTransparency
UI Tween - Bildtransparenz
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 - Canvas Group Transparenz
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 über 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.

UI ObjektEigenschaften
FrameBackgroundColor3, BorderColor3
TextLabelBackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
TextButtonBackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
ImageLabelBackgroundColor3, BorderColor3, ImageColor3
ImageButtonBackgroundColor3, BorderColor3, ImageColor3
UI Tween - Bildfarbe
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 - Canvas Group Farbe
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()

Stroke

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

UI ObjektEigenschaften
FrameBorderSizePixel, BorderColor3
TextLabelBorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
TextButtonBorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
ImageLabelBorderSizePixel, BorderColor3
ImageButtonBorderSizePixel, BorderColor3

Alternativ können Sie ein UIStroke-Kind hinzufügen und dessen Dicke, Farbe und/oder Transparenz tween.

UI-ObjektEigenschaften
UIStrokeColor, Thickness, Transparency
UI Tween - UIStroke Farbe & Dicke
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 Tween

Sie können beliebige Einzelübertragungen in komplexere Tweenings kombinieren, indem Sie mehrere Ziel-Eigenschaften an TweenService:Create() übergeben, zum Beispiel Position + Rotation oder Größe + Transparenz.

UI Tween - Position & 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()
UI Tween - 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 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 aneinanderreihen, damit sie nacheinander stattfinden, indem Sie nachfolgende Tweens beim Completed-Ereignis des vorhergehenden Tweens abspielen. Zum Beispiel bewegt das folgende Skript ein Objekt zur Mitte des Bildschirms und dreht es dann um 45°.

UI Tween Sequenz
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 den Position Tween abspielen

positionTween:Play()



-- Den Rotation Tween nach Abschluss des Position Tween abspielen

positionTween.Completed:Connect(function()

	rotationTween:Play()

end)

Stilübergänge

UI-Objekte können auch durch Stilübergänge animiert werden, vergleichbar mit CSS-Übergängen, bei denen eine oder mehrere UI-Eigenschaften durch StyleRule-Definitionen Tweened werden. Siehe die Stileditor Anleitung für Details.

Endgültige gestaltete Zustandsregel im Stileditor.

Easing-Optionen

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

Stil

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

StilBeschreibung
LinearBewegt sich mit konstanter Geschwindigkeit.
SineDie Geschwindigkeit wird durch eine Sinuswelle für eine sanfte Easing-Bewegung bestimmt.
QuadÄhnlich wie Sine, aber mit einer etwas schärferen Kurve basierend auf quadratischer Interpolation.
CubicÄhnlich wie Quad, aber mit einer etwas schärferen Kurve basierend auf kubischer Interpolation.
QuartÄhnlich wie Cubic, aber mit einer noch schärferen Kurve basierend auf quartischer Interpolation.
QuintÄhnlich wie Quart, aber mit einer noch schärferen Kurve basierend auf quintischer Interpolation.
ExponentialDie schärfste Kurve basierend auf exponenzieller Interpolation.
CircularFolgt einem kreisförmigen Bogen, sodass die Beschleunigung plötzlicher und die Verzögerung allmählicher ist im Vergleich zu Quint oder Exponential.
BackÜbersteigt leicht das Ziel und zieht dann zurück an seinen Platz.
BounceSpringt mehrfach zurück, nachdem das Ziel erreicht wurde, bevor es schließlich zum Stillstand kommt.
ElasticBewegt sich, als wäre es an einem Gummiband befestigt, und übersteigt das Ziel mehrmals.
Graphen der EasingStyle-Variationen mit einer 'In' EasingDirection. 
Easing Style - Cubic
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic)

local tween = TweenService:Create(object, tweenInfo, {Rotation = 45})

Richtung

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

RichtungBeschreibung
InDer Easing-Stil wird vorwärts angewendet.
OutDer Easing-Stil wird rückwärts angewendet.
InOutDer Easing-Stil wird in der ersten Hälfte vorwärts und in der zweiten Hälfte rückwärts angewendet.
Easing direction - InOut
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 die textbasierten UI-Elemente, wie Schnittszenenbanner, Spielerhinweise und Eingabeaufforderungen, ganz einfach mit animierten Effekten aufwerten. Der "Schreibmaschinen"-Effekt ist ideal für TextLabel, 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 um in AnimateUI.

  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

    

    	-- Übersetze den Text, wenn möglich

    	if translator then

    		displayText = translator:Translate(guiObject, text)

    	end

    

    	-- Ersetze Zeilenumbruch-Tags, sodass die Graphem-Schleife diese Zeichen nicht verpasst

    	displayText = displayText:gsub("<br%s*/>", "\n")

     	-- Entferne RichText-Tags, da die Animation Zeichen für Zeichen die Tags brechen würde

    	displayText = displayText:gsub("<[^<>]->", "")

    

    	-- Setze den übersetzten/modifizierten Text am 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

  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 folgender Code ein. Beachten Sie, dass jede Nachricht durch den Aufruf von AnimateUI.typeWrite() mit Parametern für das Elternobjekt, die anzuzeigende Zeichenfolge und die Verzögerung zwischen den Zeichen ausgegeben wird.

    LocalScript
    local ReplicatedStorage = game:GetService("ReplicatedStorage")

    

    local AnimateUI = require(ReplicatedStorage:WaitForChild("AnimateUI"))

    

    local label = script.Parent

    

    -- Lade den Übersetzer, wenn die Erfahrung 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)">unkonfrontiert beherrscht!</font> <font size="30">😈</font>]]

    AnimateUI.typeWrite(label, message2, 0.05)
©2026 Roblox Corporation. Roblox, das Roblox-Logo und "Powering Imagination" gehören zu unseren eingetragenen und nicht eingetragenen Markenzeichen in den USA und anderen Ländern.
Bedingungen·Datenschutz·Barrierefreiheit·Support
Deutsch