UI-Animation/Teenager | Dokumentation

In der Animationenist Tweening der Prozess, der zwischen zwei Schlüsselpunkten in einer Sequenz intermediale Frames erstellt. Wenn Sie eine Benutzeroberfläche entwerfen, können Sie Tweening verwenden, um ein GuiObject problemlos von einem Zustand zu einer anderen zu übertragen, z. B.:

Glattes Erhöhen der Größe eines Buttons, wenn ein Benutzer ihn auswählt.
Rutschende UI-Menüs in und aus den Bildschirmkanten.
Animieren Sie eine Gesundheitsleiste zwischen zwei Breiten, wenn ein Benutzer einen Gesundheitsschub erhält.

Einzel-Eigenschaften-Teens

Position

Um die Position eines GuiObject zu ändern:

Setzen Sie den AnchorPoint für das Objekt.
Bestimmen Sie UDim2 Koordinaten für die Zielposition des Objekts, verwendendo die skalieren -Parameter von UDim2 anstelle der genauen Pixelwerte, damit das Objekt in den genauen Zentrum des Bildschirms tweens.
Passen Sie eine TweenInfo und die Zielposition an TweenService:Create() .
Spielen Sie das Tween mit Tween:Play() .

Das folgende Code-Snippet bewegt einen ImageLabel innerhalb eines ScreenGui zum genauen Zentrum 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 vergrößern:

Bestimmen Sie UDim2 Koordinaten für die Zielgröße des Objekts, verwendendo die skalieren -Parameter von UDim2 anstelle der genauen Pixelwerte, damit das Objekt auf einen relativen Prozentsatz der Bildschirmgröße tweens.
Fügen Sie ein UIAspectRatioConstraint an das Objekt an, um sein gestaltetes Aspektverhältnis bei der Anpassung zu beibehalten.
Geben Sie eine TweenInfo und die Zielgröße an TweenService:Create() .
Spielen Sie das Tween mit Tween:Play() .

Das folgende Code-Snippet skaliert einen ImageLabel innerhalb eines ScreenGui auf 40% der Bildbreite oder Höhe (je nachdem, was kleiner ist) vom Objekt's Center Anchor-Punkt:

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

Drehung

Um die Rotation eines GuiObject :

Setzen Sie den AnchorPoint für das Objekt, um sich zu drehen.
Bestimmen Sie das Ziel Rotation für das Objekt.
Passen Sie eine TweenInfo und die Ziel-Rotation an TweenService:Create() .
Spielen Sie das 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

Die mehreren Eigenschaften steuern die Transparenz der Benutzeroberfläche, abhängig vom eingeben. Sie können jede dieser Eigenschaften individuell oder kombiniert über ein Multi-Property-Tween tweenen. Alternativ können Sie die Gesam트ransparenz eines Objekts durch Platzieren in einem CanvasGroup und Tweeting der Gruppen GroupTransparency

UI-Objekt	Eigenschaften
Frame	BackgroundTransparency
TextLabel	BackgroundTransparency , TextTransparency , TextStrokeTransparency
TextButton	BackgroundTransparency , TextTransparency , TextStrokeTransparency
ImageLabel	BackgroundTransparency , ImageTransparency
ImageButton	BackgroundTransparency , ImageTransparency

Als moderne Alternative zu TextLabel.TextStrokeTransparency und TextButton.TextStrokeTransparency kannst du die Strokesichtigkeit auf einem UIStroke -Objekt wie in 1> Strokes1> ausrichten.

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 - Leitfaden für Gruppenvisibilität
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

Die UI-Farbe der mehreren Eigenschaftensteuereinheit, abhängig vom eingeben, wird über ein Multi-Property-Tween gesteuert. Alternativ können Sie die Gesamtfarbe eines Objekts durch Platzieren in einem CanvasGroup und Tweeting der Gruppenfarbe durch Tweeting des Gruppenfarb-GroupColor3 festlegen.

UI-Objekt	Eigenschaften
Frame	BackgroundColor3 , BorderColor3
TextLabel	BackgroundColor3 , BorderColor3 , TextColor3 , 0> Class.TextLabel.TextStrokeColor3\|TextStrokeColor30>
TextButton	BackgroundColor3 , BorderColor3 , TextColor3 , 0> Class.TextButton.TextStrokeColor3\|TextStrokeColor30>
ImageLabel	BackgroundColor3 , BorderColor3 , ImageColor3
ImageButton	BackgroundColor3 , BorderColor3 , ImageColor3

Als moderne Alternative zu GuiObject.BorderColor3 , TextLabel.TextStrokeColor3 und TextButton.TextStrokeColor3, kannst du die Strokesfarbe auf einem 1> Class.UIStroke1> -Objekt wie in 4> Strokes4> dargestellt einstellen.

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 - Gruppenfarbe auf Leinwand
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()

Streich

Mehrere Eigenschaften steuern die Schaltflächen der Benutzeroberfläche, abhängig vom eingeben.

UI-Objekt	Eigenschaften
Frame	BorderSizePixel , BorderColor3
TextLabel	BorderSizePixel , BorderColor3 , TextStrokeColor3 , 0> Class.TextLabel.TextStrokeTransparency\|TextStrokeTransparency0>
TextButton	BorderSizePixel , BorderColor3 , TextStrokeColor3 , 0> Class.TextButton.TextStrokeTransparencyTransparency0>
ImageLabel	BorderSizePixel , BorderColor3
ImageButton	BorderSizePixel , BorderColor3

Alternativ kannst du ein UIStroke Kind anwenden und seine Dicke, Farbe und/oder Transparenz anpassen.

UI-Objekt	Eigenschaften
UIStroke	Color , 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-Teens

Du kannst jeden der einzelnen Eigenschaften-Tweens in komplexere Tweens kombinieren, indem du mehrere Ziel属性 an TweenService:Create() überträgst, z. B. Position + Rotation oder 1>Größe + Transparenz1>.

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

Du kannst Kettenanimationen von UI-Animationen ermöglichen, die eine nach der anderen auf dem vorherigen Tweet Completed eintreten. Zum Beispiel bewegt das folgende Skript ein Objekt in die 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})

-- Spielt zuerst die Position Tween
positionTween:Play()

-- Spielen Sie die Rotation, wenn Sie die Position-Tween abgeschlossen haben
positionTween.Completed:Connect(function()
	rotationTween:Play()
end)

Optionen zum Entlasten

Mit den Lockerungsoptionen von TweenInfo kannst du die Lockerung stil und Richtung von UI-Animationen steuern.

Stil

Enum.EasingStyle setzt die Rate der Interpolation von Anfang an beenden. Standardmäßig ist der Easing-Stil auf Enum.EasingStyle.Quad eingestellt.

Stil	Beschreibung
Linke	Bewegt sich mit konstanter Geschwindigkeit.
Sinus	Geschwindigkeit wird durch eine Sinuswelle für eine sanfte Anpassungsbewegung bestimmt.
Quadruple	Ähnlich wie Sinus aber mit einer etwas schärferen Kurve basierend auf der Quadratischen Interpolation.
Kubisch	Ähnlich wie Quad aber mit einer etwas schärferen Kurve basierend auf der Kubischen Interpolation.
Quartier	Ähnlich wie Kubisch aber mit einer noch schärferen Kurve basierend auf der Quartic-Interpolation.
Quint	Ähnlich wie Quart aber mit einer noch schärferen Kurve basierend auf der Quint-Interpolation.
Exponential	Die schärfste Kurve basiert auf der Interpolation.
Kreisförmig	Folgt einem kreisförmigen Bogen, wodurch die Beschleunigung plötzlicher und der Abstieg sanfter ist, als bei Quint oder Exponential.
Zurück	Schießt das Ziel leicht überschüssig und schießt dann in Ortzurück.
Springen	Sprungt mehrmals rückwärts, nachdem das Ziel erreicht ist, bevor es schließlich landet.
Elastik	Bewegt sich, als ob an einer Gummibande angehängt, mehrere Male das Ziel überschreit.

Graphs of EasingStyle variations with an 'In' EasingDirection.

Stil einfächer - Kubisch
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 eine Tween mit 0>Linke0>-Easing-Stil nicht betroffen ist, da die lineare Interpolation vom beendenan konstant ist.

Richtung	Beschreibung
In	Der Entlastungsstil gilt in einer vorwärts gerichteten Richtung.
Ausgang	Der Easing-Stil gilt in einer umgekehrten Richtung.
InOut-Taste.	Der Easing-Stil gilt für die erste Hälfte vorwärts und für die zweite Hälfte rückwärts.

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

Animierter Text

Sie können Text-basierte UI, wie Cutscene-Banner, Spieler-Anweisungen und Anfragen, mit animierten Effekten leicht verbessern.

Typwriter-Effekt

Der "Schreibmaschinen"-Effekt ist ideal für TextLabels, die eine Geschichte erzählen, NPC-Gespräche usw. ausgeben.

Erstellen Sie ein neues ModuleScript innerhalb von ReplicatedStorage .
Benennen Sie das neue Skript AnimateUI .

Fügen Sie den folgenden Code in das Skript, das. PL: die Skriptsein:

ModuleScript - Animation 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

	-- Übersetzen Sie den Text, wenn möglich
	if translator then
		displayText = translator:Translate(guiObject, text)
	end

	-- Ersetze Zeilennachweise, damit die Zeichen in der Grapheme-Schleife nicht verloren gehen
	displayText = displayText:gsub("<br%s*/>", "\n")
 	-- Entfernen Sie RichText-Tags, da die Animation von char-by-char die Tags zerbricht
	displayText = displayText:gsub("<[^<>]->", "")

	-- Setzen Sie übersetzten/modifizierten Text auf dem übergeordnetes Teil
	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 deine Erlebnisnicht Quellsprache ist ( „en“), ändere den Lokalisierungscode für 源_地區 “, um die Quellsprache in 2>Lokalisierungsoptionen2> zu entsprechen.

Erstellen Sie ein TextLabel in einem geeigneten Ort, wie innerhalb eines ScreenGui , der an StarterGui gebunden ist.

Fügen Sie einen neuen LocalScript als direktes Kind der Etikett ein und fügen Sie den folgenden Codesein. Beachten Sie, dass jede Nachricht durch Aufrufen von AnimateUI.typeWrite() mit Parametern für das Objekt, die Ausgabe und die Verzögerung zwischen den Zeichen ist.

Lokales Skript
local ReplicatedStorage = game:GetService("ReplicatedStorage")

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

local label = script.Parent

-- Laden Sie den Übersetzer, wenn das Spiel lokalisiert ist
--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)