UI-animatie/tweens

*Deze inhoud is vertaald met behulp van AI (bèta) en kan fouten bevatten. Klik hier om deze pagina in het Engels te bekijken.

In animatie is tweening het proces van het genereren van tussenliggende frames tussen twee sleutelpunten in een reeks. Bij het ontwerpen van een gebruikersinterface kun je tweening gebruiken om een GuiObject soepel van de ene staat naar de andere over te brengen, zoals:

  • Het soepel vergroten van de grootte van een knop wanneer een gebruiker deze selecteert.
  • UI-menu's in en uit de schermranden schuiven.
  • Een gezondheidsbalk geleidelijk animeren tussen twee breedtes wanneer een gebruiker een gezondheidsboost ontvangt.

Enkelvoudige property tweens

Positie

Om de positie van een GuiObject te tweenen:

  1. Stel het AnchorPoint voor het object in.
  2. Bepaal de UDim2 coördinaten voor de doelpositie van het object, gebruikmakend van de schaal parameters van UDim2 in plaats van exacte pixelwaarden, zodat het object naar het exacte midden van het scherm tweened.
  3. Geef een TweenInfo en de doelpositie door aan TweenService:Create().
  4. Speel de tween af met Tween:Play().

De volgende codefragment verplaatst een ImageLabel binnen een ScreenGui naar het exacte midden van het scherm:

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

Grootte

Om de grootte van een GuiObject te tweenen:

  1. Bepaal de UDim2 coördinaten voor de doelgrootte van het object, gebruikmakend van de schaal parameters van UDim2 in plaats van exacte pixelwaarden, zodat het object naar een relatieve percentage van de schermgrootte tweened.
  2. Bevestig een UIAspectRatioConstraint aan het object om de ontworpen aspectverhouding te behouden tijdens het tweenen.
  3. Geef een TweenInfo en de doelgrootte door aan TweenService:Create().
  4. Speel de tween af met Tween:Play().

De volgende codefragment schaalt een ImageLabel binnen een ScreenGui naar 40% van de schermbreedte of -hoogte (wat het kleinste is) vanaf het middelpunt van het object:

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

Rotatie

Om de rotatie van een GuiObject te tweenen:

  1. Stel het AnchorPoint voor het object in om rond te draaien.
  2. Bepaal de doel Rotation voor het object.
  3. Geef een TweenInfo en de doelrotatie door aan TweenService:Create().
  4. Speel de tween af met Tween:Play().
UI Tween - Rotatie
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()

Transparantie

Meerdere eigenschappen regelen de UI-transparantie, afhankelijk van het type object. Je kunt elk van deze eigenschappen afzonderlijk tweenen of gecombineerd via een multi-property tween. Alternatief kun je de algehele transparantie van een object tweenen door het in een CanvasGroup te plaatsen en de GroupTransparency van de groep te tweenen.

UI-objectEigenschappen
FrameBackgroundTransparency
TextLabelBackgroundTransparency, TextTransparency, TextStrokeTransparency
TextButtonBackgroundTransparency, TextTransparency, TextStrokeTransparency
ImageLabelBackgroundTransparency, ImageTransparency
ImageButtonBackgroundTransparency, ImageTransparency
UI Tween - Afbeelding Transparantie
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 Groep Transparantie
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()

Kleur

Meerdere eigenschappen regelen de UI-kleur, afhankelijk van het type object. Je kunt elk van deze eigenschappen afzonderlijk tweenen of gecombineerd via een multi-property tween. Alternatief kun je de algehele kleur van een object tweenen door het in een CanvasGroup te plaatsen en de GroupColor3 van de groep te tweenen.

UI-objectEigenschappen
FrameBackgroundColor3, BorderColor3
TextLabelBackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
TextButtonBackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
ImageLabelBackgroundColor3, BorderColor3, ImageColor3
ImageButtonBackgroundColor3, BorderColor3, ImageColor3
UI Tween - Afbeelding Kleur
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 Groep Kleur
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

Meerdere eigenschappen regelen de UI-randen, afhankelijk van het type object.

UI-objectEigenschappen
FrameBorderSizePixel, BorderColor3
TextLabelBorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
TextButtonBorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
ImageLabelBorderSizePixel, BorderColor3
ImageButtonBorderSizePixel, BorderColor3

Alternatief kun je een UIStroke kind toepassen en de dikte, kleur en/of transparantie tweenen.

UI-objectEigenschappen
UIStrokeColor, Thickness, Transparency
UI Tween - UIStroke Kleur & Dikte
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

Je kunt elke van de enkelvoudige property tweens combineren in complexere tweens door meerdere doel-eigenschappen door te geven aan TweenService:Create(), bijvoorbeeld positie + rotatie of grootte + transparantie.

UI Tween - Positie & Rotatie
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 - Grootte & Transparantie
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-sequenties

Je kunt UI-animaties aan elkaar koppelen zodat ze één voor één plaatsvinden door opeenvolgende tweens af te spelen bij het Completed evenement van de vorige tween. Bijvoorbeeld, het volgende script verplaatst een object naar het midden van het scherm en roteert het vervolgens met 45°.

UI Tween Sequentie
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})



-- Speel aanvankelijk de positie tween af

positionTween:Play()



-- Speel de rotatie tween af na voltooiing van de positie tween

positionTween.Completed:Connect(function()

	rotationTween:Play()

end)

Stijlovergangen

UI-objecten kunnen ook worden geanimeerd via stijlovergangen, vergelijkbaar met CSS-overgangen, waarbij een of meer UI-eigenschappen worden tweened via StyleRule definities. Zie de Stijl Editor gids voor details.

Eind gestileerde staat regel in de Stijl Editor.

Easing-opties

Met de easing-opties van TweenInfo kun je de easing stijl en richting van UI-animaties regelen.

Stijl

Enum.EasingStyle stelt de snelheid van interpolatie van begin tot eind in. Standaard is de easingstijl ingesteld op Enum.EasingStyle.Quad.

StijlBeschrijving
LineairBeweegt met een constante snelheid.
SinusSnelheid wordt bepaald door een sinusgolf voor een zachte easingbeweging.
QuadVergelijkbaar met Sinus maar met een iets scherpere curve op basis van kwadratische interpolatie.
CubicVergelijkbaar met Quad maar met een iets scherpere curve op basis van kubieke interpolatie.
QuartVergelijkbaar met Cubic maar met een nog scherpere curve op basis van quartische interpolatie.
QuintVergelijkbaar met Quart maar met een nog scherpere curve op basis van quintische interpolatie.
ExponentialDe scherpste curve op basis van exponentiële interpolatie.
CirkelvormigVolgt een cirkelboog, zodat versnelling plotselinger is en vertraging geleidelijker in vergelijking met Quint of Exponential.
TerugOverschrijdt iets het doel, en komt dan terug op zijn plaats.
StuiterStuitert meerdere keren achteruit na het bereiken van het doel, voordat het uiteindelijk tot rust komt.
ElastischBeweegt alsof het aan een rubberen band is bevestigd, overschrijdt het doel meerdere keren.
Grafieken van EasingStyle-variaties met een 'In' EasingDirection.
Easing Stijl - Cubic
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic)

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

Richting

Enum.EasingDirection definieert hoe de easingstijl interpolatie op een object wordt toegepast, met een standaard van Out. Merk op dat een tween met Lineaire easingstijl niet wordt beïnvloed, aangezien lineaire interpolatie constant is van begin tot eind.

RichtingBeschrijving
InDe easingstijl wordt in een voorwaartse richting toegepast.
OutDe easingstijl wordt in een omgekeerde richting toegepast.
InOutDe easingstijl wordt voorwaarts toegepast voor de eerste helft en in omgekeerde richting voor de tweede helft.
Easing richting - InOut
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic, Enum.EasingDirection.InOut)

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

Typewriter-effect op tekst

Je kunt tekstgebaseerde UI, zoals cutscene-banners, spelersinstructies en prompts, eenvoudig verbeteren met geanimeerde effecten. Het "typewriter"-effect is ideaal voor TextLabels die een verhaal vertellen, NPC-gesprekken weergeven, enz.

  1. Maak een nieuwe ModuleScript binnen ReplicatedStorage.

  2. Hernoem het nieuwe script naar AnimateUI.

  3. Plak de volgende code in het script:

    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

    

    	-- Vertaal tekst indien mogelijk

    	if translator then

    		displayText = translator:Translate(guiObject, text)

    	end

    

    	-- Vervang regelafbrekingstags zodat de grapheloop deze tekens niet mist

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

     	-- Verwijder RichText-tags omdat animatie per teken de tags zou breken

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

    

    	-- Stel de vertaalde/aangepaste tekst in op de ouder

    	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. Maak een TextLabel op een geschikte locatie, zoals binnen een ScreenGui die is gekoppeld aan StarterGui.

  5. Voeg een nieuwe LocalScript toe als directe kind van het label en plak de volgende code erin. Merk op dat elk bericht wordt weergegeven door AnimateUI.typeWrite() aan te roepen met parameters voor het ouderobject, de string die moet worden weergegeven en de vertraging tussen de tekens.

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

    

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

    

    local label = script.Parent

    

    -- Laad vertaler als het spel gelokaliseerd is

    --AnimateUI.loadTranslator()

    

    local message1 = [[Achter deze deur is de<br /><font size="46" color="rgb(255,50,25)">Grote Zorgoth...</font> <font size="40">🗡</font>]]

    AnimateUI.typeWrite(label, message1, 0.05)

    

    task.wait(1)

    

    local message2 = [[...die deze kerker <font color="rgb(255,200,50)">onbetwist heerst!</font> <font size="30">😈</font>]]

    AnimateUI.typeWrite(label, message2, 0.05)
©2026 Roblox Corporation. Roblox, het Roblox-logo en Powering Imagination behoren tot onze geregistreerde en niet-geregistreerde handelsmerken in de VS en andere landen.
Voorwaarden·Privacy·Toegankelijkheid·Ondersteuning
Nederlands