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

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

사용자가 버튼을 선택할 때 버튼의 크기를 부드럽게 증가시킵니다.
UI 메뉴를 화면 가장자리에서 슬라이드하여 나타내고 사라지게 합니다.
사용자가 체력 증가를 받았을 때 체력 바의 두 너비 사이를 점진적으로 애니메이션합니다.

단일 속성 트윈

위치

GuiObject의 위치를 트위닝하려면:

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

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

UI 트윈 - 위치
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 트윈 - 크기
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 트윈 - 회전
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 트윈 - 이미지 투명도
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 트윈 - 캔버스 그룹 투명도
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 트윈 - 이미지 색상
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 트윈 - 캔버스 그룹 색상
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 트윈 - UIStroke 색상 & 두께
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 트윈 - 위치 & 회전
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 트윈 - 크기 & 투명도
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 트윈 시퀀스
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 객체는 StyleRule 정의를 통해 트위닝되며, 이는 CSS 전환과 유사합니다. 자세한 내용은 스타일 편집기 가이드를 참조하십시오.

이징 옵션

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

스타일

Enum.EasingStyle은 시작에서 끝까지의 보간 속도를 설정합니다. 기본적으로 이징 스타일은 Enum.EasingStyle.Quad로 설정되어 있습니다.

스타일	설명
선형	일정한 속도로 이동합니다.
사인	부드러운 이징 모션을 위해 사인 파동으로 속도가 결정됩니다.
쿼드	사인과 유사하나, 2차 보간을 기반으로 약간 더 가파른 곡선을 가집니다.
큐빅	쿼드와 유사하나, 3차 보간을 기반으로 약간 더 가파른 곡선을 가집니다.
쿼트	큐빅과 유사하나, 4차 보간을 기반으로 훨씬 더 가파른 곡선을 가집니다.
퀸트	쿼트와 유사하나, 5차 보간을 기반으로 훨씬 더 가파른 곡선을 가집니다.
지수	지수 보간을 기반으로 가장 가파른 곡선입니다.
원	원형 호를 따라 움직이며, 가속은 더 급하고 감속은 퀸트 또는 지수에 비해 더 완만합니다.
뒤로	목표를 살짝 넘어서서 뒤로 들어옵니다.
바운스	목표에 도달한 후 여러 번 뒤로 튕깁니다. 그 후 최종적으로 정착합니다.
탄성	고무 밴드에 연결된 것처럼 여러 번 목표를 넘은 후 움직입니다.

‘In’ EasingDirection의 EasingStyle 변형 그래프.

이징 스타일 - 큐빅
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic)
local tween = TweenService:Create(object, tweenInfo, {Rotation = 45})

방향

Enum.EasingDirection은 객체에 대한 이징 스타일 보간이 적용되는 방법을 정의하며, 기본값은 Out입니다. 선형 이징 스타일을 사용하는 트윈은 영향을 받지 않으므로, 선형 보간이 시작에서 끝까지 일정합니다.

방향	설명
In	이징 스타일이 정방향으로 적용됩니다.
Out	이징 스타일은 역방향으로 적용됩니다.
InOut	이징 스타일이 전반부에서는 정방향으로 적용되고, 후반부에서는 역방향으로 적용됩니다.

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

텍스트의 타자기 효과

컷신 배너, 플레이어 설명, 프롬프트 등의 텍스트 기반 UI를 쉽게 향상시킬 수 있는 애니메이션 효과를 사용할 수 있습니다. "타자기" 효과는 이야기, NPC 대화 등을 전달하는 TextLabels에 최적입니다.

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을 생성합니다. 예를 들어 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 size="30">😈</font>]]
AnimateUI.typeWrite(label, message2, 0.05)