Benutzeroberfläche-Animation/Teenager

In der Animationenist Tweening der Prozess der Erzeugung von Zwischenrahmen zwischen zwei Schlüsselpunkten in einer Sequenz.Wenn Sie eine Benutzeroberfläche entwerfen, können Sie Tweening verwenden, um einen Übergang von einem Zustand in einen anderen reibungslos durchzuführen, wie:

Die Größe eines Buttons bei Auswahl durch einen Benutzer schrittweise erhöhen.
Schiebbare UI-Menüs in und aus den Bildschirmrändern.
Animieren einer Gesundheitsleiste schrittweise zwischen zwei Breiten, wenn ein Benutzer einen Gesundheitsboost erhält.

Einzelneigenschaft-Teenager

Stelle

Um die Position von einem GuiObject zu trennen:

Setze das AnchorPoint für das Objekt.
Bestimme Koordinaten für die Zielposition des Objekts, verwende die Skalierungsparameter von anstelle von genauen Pixelwerten, damit das Objekt in die genaue Mitte des Bildschirms fällt.
Geben Sie eine TweenInfo und die Zielposition an TweenService:Create() weiter.
Spiele das Teen mit Tween:Play().

Das folgende Code-Snippet verschiebt einen ImageLabel innerhalb von ScreenGui in die genaue Mitte des Bildschirms:

Benutzeroberfläche 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 von einem GuiObject zu verkleinern:

Bestimmen Sie Koordinaten für die Zielgröße des Objekts, indem Sie die Skalierungsparameter von anstelle von genauen Pixelwerten verwenden, damit das Objekt in einen relativen Prozentsatz der Bildschirmgröße wechselt.
Füge ein UIAspectRatioConstraint an das Objekt an, um seine entworfene Aspektverhältnis beim Übergang zu erhalten.
Geben Sie eine TweenInfo und die Zielgröße an TweenService:Create() weiter.
Spiele das Teen mit Tween:Play().

Das folgende Code-Snippet skaliert einen ImageLabel innerhalb einer ScreenGui auf 40% der Bildbreite oder Höhe des Bildes (welche auch immer kleiner ist) vom mittleren Ankerpunkt des Objekts:

UI-Teenager - 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 Drehung von einem GuiObject zu trennen:

Setze das AnchorPoint für das Objekt, um sich darum zu drehen.
Bestimmen Sie das Ziel Rotation für das Objekt.
Geben Sie eine TweenInfo und die Zielrotierung an TweenService:Create() weiter.
Spiele das Teen mit Tween:Play().

UI-Teenager - 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 Transparenz der Benutzeroberfläche, abhängig vom eingeben.Du kannst jede dieser Eigenschaften einzeln oder kombiniert durch eine Mehrfacheigenschaft-Wanderung anzeigen.Alternativ kannst du die Gesamttransparenz eines Objekts erhöhen, indem du es in einen CanvasGroup und die Gruppe in einen GroupTransparency legst.

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 Stichtransparenz auf einem UIStroke, wie in Strich beschrieben, verändern.

UI-Teenager - 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-Teenager - Canvas-Gruppentransparenz
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 eingeben.Du kannst jede dieser Eigenschaften einzeln oder kombiniert durch eine Mehrfacheigenschaft-Wanderung anzeigen.Alternativ kannst du die Gesamtfarbe eines Objekts ändern, indem du es in einem CanvasGroup platzierst und die Farbe der Gruppe GroupColor3 ändert.

UI-Objekt	Eigenschaften
Frame	BackgroundColor3 , BorderColor3
TextLabel	BackgroundColor3 , BorderColor3 , TextColor3 , TextStrokeColor3
TextButton	BackgroundColor3 , BorderColor3 , TextColor3 , TextStrokeColor3
ImageLabel	BackgroundColor3 , BorderColor3 , ImageColor3
ImageButton	BackgroundColor3 , BorderColor3 , ImageColor3

Als moderne Alternative zu GuiObject.BorderColor3, TextLabel.TextStrokeColor3 und TextButton.TextStrokeColor3 kannst du die Strichfarbe auf einem UIStroke anpassen, wie es in Strichfarbe beschrieben ist.

UI-Teenager - 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-Teenager - Canvas-Gruppenfarbe
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-Grenzen, abhängig vom eingeben.

UI-Objekt	Eigenschaften
Frame	BorderSizePixel , BorderColor3
TextLabel	BorderSizePixel , BorderColor3 , TextStrokeColor3 , TextStrokeTransparency
TextButton	BorderSizePixel , BorderColor3 , TextStrokeColor3 , TextStrokeTransparency
ImageLabel	BorderSizePixel , BorderColor3
ImageButton	BorderSizePixel , BorderColor3

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

UI-Objekt	Eigenschaften
UIStroke	Color , Thickness , Transparency

UI Tween - UIStroke Farbe und 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-Eigenschaft-Teenager

Du kannst jeden der Einzel属itäts-Teenager in komplexere Teenager kombinieren, indem du mehrere Ziel属itäten an TweenService:Create() überträgst, zum Beispiel Position + Rotation oder Größe + Transparenz .

UI-Teenager - Position & Drehung
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-Teenager - Größe und 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()

Übergangssequenzen

Du kannst UI-Animationen ketten, die eine nach der anderen auftreten, indem du im Ereignis des vorherigen Tweens nachfolgende Teenager spielst Completed.Zum Beispiel bewegt das folgende Skript ein Objekt in die Mitte des Bildschirms und dreht es dann um 45°.

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

-- Spielposition zunächst Tween
positionTween:Play()

-- Spiele Rotations-Tween beim Abschluss von Positions-Tween
positionTween.Completed:Connect(function()
	rotationTween:Play()
end)

Entlastungsoptionen

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

Stil

Enum.EasingStyle legt die Rate der Interpolation von Anfang bis beendenfest. Standardmäßig wird der Lockerungsstil auf Enum.EasingStyle.Quad festgelegt.

Stil	Beschreibung
Lineare	Bewegt sich mit konstanter Geschwindigkeit.
Sinus	Geschwindigkeit wird durch eine Sinuswelle für eine sanfte Lockerungsbewegung bestimmt.
Quad	Ähnlich wie Sinus aber mit einer etwas schärferen Kurve basierend auf quadratischer Interpolation.
Kubisch	Ähnlich wie Quad aber mit einer etwas schärferen Kurve basierend auf kubischer Interpolation.
Viertel	Ähnlich wie Kubisch aber mit einer noch schärferen Kurve basierend auf quartischer Interpolation.
Viertel	Ähnlich wie Viertel aber mit einer noch schärferen Kurve basierend auf quintischer Interpolation.
Exponenzielle	Die schärfste Kurve basierend auf exponentieller Interpolation.
Kreisförmig	Folgt einem kreisförmigen Bogen, wodurch die Beschleunigung plötzlicher und die Verlangsamung langsamer gegenüber Quint oder Exponential ist.
Zurück	Überschießt leicht das Ziel, dann kehrt in die Ortzurück.
Abprallen	Sprungen mehrfach rückwärts, nachdem das Ziel erreicht wurde, bevor sich schließlich niedergelegt wird.
Elastisch	Bewegt sich, als wäre er an ein Gummiband angehängt, überschießt das Ziel mehrmals.

Graphs of EasingStyle variations with an 'In' EasingDirection.

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

Richtung

Enum.EasingDirection definiert, wie die Interpolation des Lockerungsstils auf ein Objekt mit einem Standard von Aus angewendet wird.Beachten Sie, dass ein Übergang mit linearem Lockerungsstil nicht betroffen ist, da die lineare Interpolation von Anfang bis beendenkonstant ist.

Richtung	Beschreibung
In	Der Lockerungsstil gilt in einer vorwärts gerichteten Richtung.
Aus	Der Lockerungsstil gilt in einer umgekehrten Richtung.
AusInnen	Der Lockerungsstil gilt für die erste Hälfte vorwärts und für die zweite Hälfte rückwärts.

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

Text animieren

Du kannst die Text-basierte Benutzeroberfläche, wie z. B. Cutscene-Banner, Spieleranleitungen und Eingabeaufforderungen, mit animierten Effekten leicht verbessern.

Schreibmaschine-Effekt

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

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

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

ModuleScript - Animieren von 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

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

	-- Ersetze Zeilenvorlauf-Tags, damit die Grapheme-Schleife diese Zeichen nicht verfehlt
	displayText = displayText:gsub("<br%s*/>", "\n")
 	-- Entferne RichText-Tags, da die Zeichen-zu-Zeichen-Animation die Tags zerstören wird
	displayText = displayText:gsub("<[^<>]->", "")

	-- Übersetzten/modifizierten Text auf übergeordnetes Teilfestlegen
	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 deiner Erlebnisnicht Englisch ist ( ), ändere den Lokalkode für um die Quellsprache in Lokalisierungseinstellungen zu entsprechen.

Erstellen Sie ein TextLabel an einem geeigneten Ort, wie innerhalb eines ScreenGui übergeordneten zu StarterGui.

Füge einen neuen LocalScript als direktes Kind des Labels ein und füge den folgenden Codesein.Beachten Sie, dass jede Nachricht durch Aufrufen von AnimateUI.typeWrite() mit Parametern für das zugeordnete Objekt, den zu AusgabeString und die Verzögerung zwischen den Zeichen ausgegeben wird.

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

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

local label = script.Parent

-- Übersetzer laden, wenn das Spiel lokalisiert ist
--AnimierenUI.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)

Auf dieser Seite