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

애니메이션에서 트리밍은 시퀀스의 두 키 포인트 사이에서 중간 프레임을 생성하는 프로세스입니다. 사용자 인터페이스를 설계할 때 트리밍을 사용하여 Class.GuiObject 를 원활하게 한 단계에서 다른 단계로 전환할 수 있습니다. 예를 들어:

사용자가 버튼을 선택할 때 버튼의 크기를 부드럽게 조정합니다.
화면 모서리에서 슬라이딩 UI 메뉴.
사용자가 체력 부스트를 받을 때 두 가지 너비 사이의 체력 바를 순차적으로 애니메이션합니다.

단일 속성 십대

위치

Class.GuiObject의 위치를 트위니티하려면:

개체에 대해 AnchorPoint 을 설정합니다.
스케일 매개 변수를 사용하여 대상 위치에 대한 UDim2 좌표를 결정하고, 정확한 픽셀 값을 사용하여 개체를 화면 센터에 정확하게 트윈하도록 하십시오.
Datatype.TweenInfo 및 TweenService:Create() 에 대한 대상 위치를 지정합니다.
PlayTween:Play()로 트위니를 플레이합니다.

다음 코드 스냅은 ImageLabel 를 ScreenGui 의 정확한 중심으로 이동합니다.

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

크기

Class.GuiObject의 크기를 조정하려면:

스케일 매개 변수를 사용하여 대상 크기를 결정하고 스케일 매개 변수를 대체하여 오브젝트 트위니언을 스크린 크기의 상대 백분율로 조정하십시오. 이렇게 하면 오브젝트 크기를 스케일하는 것이 아닌 정확한 픽셀 값을 사용하여 오브젝트를 스케일하는
Class.UIAspectRatioConstraint 개체에 부착하여 트윈 시 디자인된 모양 비율을 유지합니다.
Datatype.TweenInfo 및 TweenService:Create() 에 대한 대상 크기를 지정합니다.
PlayTween:Play()로 트위니를 플레이합니다.

다음 코드 스니펫은 ImageLabel 내에 있는 ScreenGui 를 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()

회전

Class.GuiObject의 회전을 트위니트하려면:

개체를 회전하려면 AnchorPoint 을 설정합니다.
개체에 대한 대상 Rotation 을 결정합니다.
Datatype.TweenInfo 및 대상 회전을 TweenService:Create() 에 패스합니다.
PlayTween: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 투명도가 변경됩니다. 각 속성을 개별적으로 또는 그룹화된 다음 Class.CanvasGroup 내에 배치하여 트위닝하여 투명도를 변경할 수 있습니다. 또는 Class.CanvasGroup.GroupTransparency|GroupTransparency 를 그룹의 내부에

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

현대적인 대안으로 TextLabel.TextStrokeTransparency 및 TextButton.TextStrokeTransparency , 색 투명도를 스트로크 개체에 적용하려면 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 내에 배치하여 그룹의 전체 색상을

UI 개체	속성
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

현대적인 대안으로 GuiObject.BorderColor3, TextLabel.TextStrokeColor3 및 TextButton.TextStrokeColor3 , 현재 스트로크 색상을 1>Stroke1> 에 대해 설명한 대로 트위니 스트로크 색상을 4>Class.UIStroke4> 개

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 , 0> Class.TextLabel.TextStrokeTransparency\|TextStrokeTransparency0>
TextButton	BorderSizePixel , BorderColor3 , TextStrokeColor3 , 0> Class.TextButton.TextStrokeTransparencyTransparency0>
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()

속성 다중 십대

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

트윈 시퀀스

이전 트윈의 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)

옵션 완화

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

스타일

Enum.EasingStyle 시작부터 종료인터플레이션 속도를 설정합니다. 기본적으로 쉬운 스타일은 Enum.EasingStyle.Quad 입니다.

스타일	설명
직선	일정한 속도로 이동합니다.
사인	속도는 부드러운 이동 동작에 대한 사인 웨이브로 결정됩니다.
Quad	정수 변환에 기반한 약간 더 뾰족뾰족한 곡선과 비슷하지만 사인 이 아닙니다.
큐빅	Quad와 유사하지만 쿠비ック 인터폴레이션을 기반으로 약간 더 뾰족한 곡선을 그립니다.
Quart	쿠빅과 비슷하지만 쿼르틱 인터폴레이션을 기반으로 한 훨씬 더 날카로운 곡선.
Quint	Quart와 유사하지만, 쿼티컬 인터폴레이션을 기반으로 더 날카로운 곡선을 그립니다.
기하급수	지수 투명도를 기반으로 한 가장 날카로운 곡선.
원형	원형 곡선을 따라 가속이 더 급격하고 감소가 더 부드럽습니다. Quint 또는 Exponential 보다.
뒤로 가기	대상을 약간 벗어나 대상 뒤로 움직입니다.
바운스	최종 목표에 도달한 후 여러 번 역으로 되돌아 오지만, 결국 앉힙니다.
탄력성을 사용하여 구성요소를 조정합니다.	고무 밴드에 연결된 것처럼 이동하고 대상을 여러 번 놓칩니다.

Graphs of EasingStyle variations with an 'In' EasingDirection.

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

방향

Enum.EasingDirection 은 개체에 적용할 이슬링 스타일 인터폴레이션의 기본을 설정합니다. 기본적으로 출 입니다. 직선 이슬링 스타일의 트위니언에는 변경 내용이 적용되지 않습니다. 직선 이슬링 스타일의 이슬링 기반은 종료

방향	설명
에	이지 스타일은 앞으로 적용됩니다.
종료	이지 스타일은 역방향에 적용됩니다.
InOut	이지 스타일은 첫 번째 절반에 대해 앞으로 적용되고 두 번째 절반에 대해 뒤로 적용됩니다.

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

텍스트 애니메이션

애니메이션 효과를 사용하여 씬 베이스 배너, 플레이어 지시 및 프롬프트와 같은 텍스트 기반 UI를 쉽게 개선할 수 있습니다.

타이포그래퍼 효과

이 "타이핑 효과"는 스토리를 전하는 데 사용되는 TextLabels 그리고 출력 NPC 대화 등에 사용되는 데 이상적입니다.

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

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

모듈 스크립트 - 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 에 대한 원본 언어를 일치하도록 로컬화 설정에 따라 로컬 언어를 변경하십시오.

Class.TextLabel 을 적절한 위치에 생성하십시오, 예를 들어 ScreenGui 의 부모 내에 있습니다.

라벨의 직접 자식으로 새로운 LocalScript 를 삽입하고 다음 코드에 붙여넣습니다. 각 메시지는 부모 개체에 대한 AnimateUI.typeWrite() 와 매개 변수를 사용하여 출력하며 문자 사이의 지연을 나타냅니다.

로컬 스크립트
local ReplicatedStorage = game:GetService("ReplicatedStorage")

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

local label = script.Parent

-- 게임이 로컬화된 경우 번역기를 로드하십시오
--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)