UI 애니메이션/트윈 | 설명서 - Roblox 크리에이터 허브

애니메이션에서 트윈은 시퀀스의 두 주요 지점 사이에 중간 프레임을 생성하는 프로세스입니다. 사용자 인터페이스를 설계할 때, 트윈을 사용하여 GuiObject를 한 상태에서 다른 상태로 부드럽게 전환할 수 있습니다. 예를 들어:

사용자가 버튼을 선택할 때 버튼의 크기를 부드럽게 증가시키기.
UI 메뉴를 화면 가장자리에서 슬라이드 인 및 아웃하기.
사용자가 체력 부스트를 받을 때 체력 바를 두 개의 너비 사이에서 점진적으로 애니메이션하기.

단일 속성 트윈

위치

GuiObject의 위치를 트윈하려면:

객체의 AnchorPoint를 설정합니다.
객체의 목표 위치에 대한 UDim2 좌표를 결정합니다. 정확한 픽셀 값 대신 UDim2의 스케일 매개변수를 사용하여 객체가 화면의 정확한 중앙으로 트윈되도록 합니다.
TweenInfo와 목표 위치를 TweenService:Create()에 전달합니다.
Tween:Play()로 트윈을 재생합니다.

다음 코드 조각은 ScreenGui 내의 ImageLabel을 화면의 정확한 중앙으로 이동시킵니다:

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

크기

GuiObject의 크기를 트윈하려면:

객체의 목표 크기에 대한 UDim2 좌표를 결정합니다. 정확한 픽셀 값 대신 UDim2의 스케일 매개변수를 사용하여 객체가 화면 크기의 상대적인 비율로 트윈되도록 합니다.
트윈 중에 설계된 종횡비를 유지하기 위해 객체에 UIAspectRatioConstraint를 부착합니다.
TweenInfo와 목표 크기를 TweenService:Create()에 전달합니다.
Tween:Play()로 트윈을 재생합니다.

다음 코드 조각은 ScreenGui 내의 ImageLabel을 화면 너비 또는 높이의 40%로 객체의 중앙 앵커 포인트에서 스케일링합니다:

UI Tween - Size

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

회전

GuiObject의 회전을 트윈하려면:

회전할 객체의 AnchorPoint를 설정합니다.
객체의 목표 Rotation을 결정합니다.
TweenInfo와 목표 회전을 TweenService:Create()에 전달합니다.
Tween:Play()로 트윈을 재생합니다.

UI Tween - Size

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

투명도

여러 속성이 UI 투명도를 제어하며, 객체 유형에 따라 다릅니다. 이러한 속성을 개별적으로 또는 다중 속성 트윈을 통해 결합하여 트윈할 수 있습니다. 또는 객체를 CanvasGroup 내에 배치하고 그룹의 GroupTransparency를 트윈하여 객체의 전체 투명도를 트윈할 수 있습니다.

UI 객체	속성
Frame	BackgroundTransparency
TextLabel	BackgroundTransparency, TextTransparency, TextStrokeTransparency
TextButton	BackgroundTransparency, TextTransparency, TextStrokeTransparency
ImageLabel	BackgroundTransparency, ImageTransparency
ImageButton	BackgroundTransparency, ImageTransparency

TextLabel.TextStrokeTransparency 및 TextButton.TextStrokeTransparency의 현대적인 대안으로, Stroke에서 설명한 대로 UIStroke 객체에서 스트로크 투명도를 트윈할 수 있습니다.

UI Tween - Image Transparency

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 Transparency

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

색상

여러 속성이 UI 색상을 제어하며, 객체 유형에 따라 다릅니다. 이러한 속성을 개별적으로 또는 다중 속성 트윈을 통해 결합하여 트윈할 수 있습니다. 또는 객체를 CanvasGroup 내에 배치하고 그룹의 GroupColor3를 트윈하여 객체의 전체 색상을 트윈할 수 있습니다.

UI 객체	속성
Frame	BackgroundColor3, BorderColor3
TextLabel	BackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
TextButton	BackgroundColor3, BorderColor3, TextColor3, TextStrokeColor3
ImageLabel	BackgroundColor3, BorderColor3, ImageColor3
ImageButton	BackgroundColor3, BorderColor3, ImageColor3

GuiObject.BorderColor3, TextLabel.TextStrokeColor3, 및 TextButton.TextStrokeColor3의 현대적인 대안으로, Stroke에서 설명한 대로 UIStroke 객체에서 스트로크 색상을 트윈할 수 있습니다.

UI Tween - Image Color

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 Color

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

스트로크

여러 속성이 UI 테두리를 제어하며, 객체 유형에 따라 다릅니다.

UI 객체	속성
Frame	BorderSizePixel, BorderColor3
TextLabel	BorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
TextButton	BorderSizePixel, BorderColor3, TextStrokeColor3, TextStrokeTransparency
ImageLabel	BorderSizePixel, BorderColor3
ImageButton	BorderSizePixel, BorderColor3

또한 UIStroke 자식을 적용하고 두께, 색상 및/또는 투명도를 트윈할 수 있습니다.

UI 객체	속성
UIStroke	Color, Thickness, Transparency

UI Tween - UIStroke Color & Thickness

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

다중 속성 트윈

단일 속성 트윈의 어떤 조합도 TweenService:Create()에 여러 목표 속성을 전달하여 더 복잡한 트윈으로 결합할 수 있습니다. 예를 들어 위치 + 회전 또는 크기 + 투명도.

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 - Size & Transparency

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

트윈 시퀀스

UI 애니메이션을 연속적으로 발생하도록 체인할 수 있습니다. 이전 트윈의 Completed 이벤트 후에 후속 트윈을 재생합니다. 예를 들어, 다음 스크립트는 객체를 화면 중앙으로 이동한 다음 45° 회전시킵니다.

UI Tween Sequence

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

-- 처음에 위치 트윈 재생
positionTween:Play()

-- 위치 트윈 완료 시 회전 트윈 재생
positionTween.Completed:Connect(function()
	rotationTween:Play()
end)

스타일 전환

UI 객체는 스타일 전환을 통해 애니메이션할 수도 있으며, 이는 CSS 전환과 유사합니다. 하나 이상의 UI 속성이 StyleRule 정의를 통해 트윈됩니다. 자세한 내용은 스타일 편집기 가이드를 참조하세요.

이징 옵션

TweenInfo의 이징 옵션을 사용하여 UI 애니메이션의 이징 스타일과 방향을 제어할 수 있습니다.

스타일

Enum.EasingStyle은 시작부터 끝까지의 보간 속도를 설정합니다. 기본적으로 이징 스타일은 Enum.EasingStyle.Quad로 설정됩니다.

스타일	설명
선형	일정한 속도로 이동합니다.
사인	부드러운 이징 동작을 위해 사인 곡선에 의해 속도가 결정됩니다.
쿼드	사인과 유사하지만 2차 보간에 기반한 약간 더 날카로운 곡선입니다.
큐빅	쿼드와 유사하지만 3차 보간에 기반한 약간 더 날카로운 곡선입니다.
쿼트	큐빅과 유사하지만 4차 보간에 기반한 더 날카로운 곡선입니다.
퀸트	쿼트와 유사하지만 5차 보간에 기반한 더 날카로운 곡선입니다.
지수	지수 보간에 기반한 가장 날카로운 곡선입니다.
원형	원형 아크를 따르며, 가속이 더 갑작스럽고 감속이 퀸트 또는 지수보다 더 점진적입니다.
백	목표를 약간 초과한 다음 제자리로 돌아옵니다.
바운스	목표에 도달한 후 여러 번 뒤로 튕깁니다. 마지막에 안정됩니다.
탄성	고무줄에 붙어 있는 것처럼 움직이며, 목표를 여러 번 초과합니다.

EasingDirection이 'In'인 EasingStyle 변형의 그래프.

Easing Style - Cubic

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

방향

Enum.EasingDirection은 이징 스타일 보간이 객체에 어떻게 적용되는지를 정의하며, 기본값은 Out입니다. 선형 이징 스타일의 트윈은 영향을 받지 않으며, 선형 보간은 시작부터 끝까지 일정합니다.

방향	설명
In	이징 스타일이 정방향으로 적용됩니다.
Out	이징 스타일이 역방향으로 적용됩니다.
InOut	이징 스타일이 첫 번째 절반은 정방향으로, 두 번째 절반은 역방향으로 적용됩니다.

Easing direction - InOut

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

타자기 효과 텍스트

텍스트 기반 UI, 예를 들어 컷신 배너, 플레이어 지침 및 프롬프트에 애니메이션 효과를 쉽게 추가할 수 있습니다. "타자기" 효과는 이야기를 전달하는 TextLabels, NPC 대화 등을 위해 이상적입니다.

ReplicatedStorage 내에 새 ModuleScript를 생성합니다.
새 스크립트의 이름을 AnimateUI로 변경합니다.

스크립트에 다음 코드를 붙여넣습니다:

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

	-- 가능한 경우 텍스트 번역
	if translator then
		displayText = translator:Translate(guiObject, text)
	end

	-- 그래프 문자 루프가 해당 문자를 놓치지 않도록 줄 바꿈 태그를 교체합니다
	displayText = displayText:gsub("<br%s*/>", "\n")
 	-- 문자별 애니메이션이 태그를 깨뜨리지 않도록 RichText 태그를 제거합니다
	displayText = displayText:gsub("<[^<>]->", "")

	-- 부모에 번역된/수정된 텍스트 설정
	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

게임의 소스 언어가 영어가 아닌 경우("en"), SOURCE_LOCALE의 로케일 코드를 소스 언어에 맞게 변경하세요. 로컬화 설정에서 확인할 수 있습니다.

적절한 위치에 TextLabel을 생성합니다. 예를 들어 StarterGui에 부모로 하는 ScreenGui 내에 생성합니다.

레이블의 직접 자식으로 새 LocalScript를 삽입하고 다음 코드를 붙여넣습니다. 각 메시지는 부모 객체, 출력할 문자열 및 문자 간의 지연을 매개변수로 하여 AnimateUI.typeWrite()를 호출하여 출력됩니다.

LocalScript

local ReplicatedStorage = game:GetService("ReplicatedStorage")

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

local label = script.Parent

-- 게임이 로컬화된 경우 번역기 로드
--AnimateUI.loadTranslator()

local message1 = [[이 문 너머에는<br /><font size="46" color="rgb(255,50,25)">위대한 조르고스...</font> <font size="40">🗡</font>]]
AnimateUI.typeWrite(label, message1, 0.05)

task.wait(1)

local message2 = [[...이 던전을 <font color="rgb(255,200,50)">도전 없이</font> 지배하는 존재!</font> <font size="30">😈</font>]]
AnimateUI.typeWrite(label, message2, 0.05)