UI 애니메이션/십대

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

사용자가 버튼을 선택할 때 버튼 크기를 부드럽게 늘리기.
화면 가장자리에서 슬라이딩 UI 메뉴.
사용자가 건강 부스트를 받을 때 두 너비 사이에서 점진적으로 건강 바를 애니메이션하는 중.

단일 속성 십대

위치

위치 를 중간 조정하려면: GuiObject :

개체에 대해 AnchorPoint를 설정합니다.
정확한 픽셀 값 대신 정확한 화면 중앙으로 개체를 조정하기 위해 UDim2 매개변수를 사용하여 개체의 대상 위치에 대한 좌표 를 결정하고, UDim2 매개변수를 사용하여 정확한 좌표를 결정합니다.
TweenInfo 와 대상 위치를 TweenService:Create() 에 전달합니다.
tween을 Tween: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()

크기

크기 를 조정하려면: GuiObject의

정확한 픽셀 값 대신 스케일 매개 변수를 사용하여 대상 크기의 목표 좌표를 결정하고, 목표 십대가 화면 크기의 상대 백분율로 조정하도록 합니다. using the scale parameters of instead of exact pixel values so that the object tweens to a relative percentage of the screen size.
중간 화면에서 디자인된 비율을 유지하기 위해 개체에 UIAspectRatioConstraint를 연결하십시오.
TweenInfo 및 대상 크기를 TweenService:Create() 로 전달합니다.
tween을 Tween:Play()로 재생합니다.

다음 코드 스니펫은 개체의 중앙 앵커 지점에서 화면 너비나 높이의 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()

회전

To tween the 회전 of a GuiObject :

회전할 개체에 대해 AnchorPoint를 설정합니다.
개체에 대한 대상 Rotation 을 결정합니다.
TweenInfo 및 대상 회전을 TweenService:Create() 에 전달합니다.
tween을 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

현대적인 대안으로 및 , 당신은 스트로크의 투명도를 개체에서 설명한 것처럼 중간에 줄일 수 있습니다.stroke transparency on a 스트로크 object as outlined in Stroke .

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

현대적인 대안으로 , , 및 , 당신은 스트로크 색을 중간에서 바꿀 수 있습니다 에서 설명한 스트로크 개체에 대해.

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

십대 시퀀스

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

완화 옵션

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

스타일

Enum.EasingStyle 시작부터 종료인터폴레이션 속도를 설정합니다. 기본적으로 완화 스타일은 Enum.EasingStyle.Quad로 설정됩니다.

스타일	설명
직선	일정한 속도로 이동합니다.
사인	속도는 부드러운 완화 동작을 위한 사인 웨이브에 의해 결정됩니다.
쿼드	사인 과 비슷하지만 쿼드라틱 인터폴레이션을 기반으로 약간 더 날카로운 곡선이 있습니다.
큐빅	쿼드 와 비슷하지만 큐빅 인터폴레이션을 기반으로 약간 더 날카로운 곡선이 있습니다.
쿼트	큐빅 과 비슷하지만 쿼티크 인터폴레이션을 기반으로 한 더 날카로운 곡선이 있습니다.
퀸트	쿼트 와 비슷하지만 쿼틱 인터폴레이션을 기반으로 한 더 날카로운 곡선이 있습니다.
지수적	지수 적분을 기반으로 가장 날카로운 곡선입니다.
원형	가속이 퀸트 또는 지수 보다 더 갑작스럽고 감속이 더 부드러워지도록 원형 곡선을 따릅니다.
뒤로	목표물을 약간 초과하고 나서 플레이스돌아갑니다.
바운스	목표에 도달한 후 결국 정착하기 전에 여러 번 뒤로 튕깁니다.
탄성	고무 밴드에 연결된 것처럼 움직여 목표물을 여러 번 넘어서합니다.

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 는 기본값으로 완화 스타일 의 인터폴레이션이 개체에 적용되는 방법을 정의합니다, 즉 Out 입니다.선형 완화 스타일이 있는 십대는 선형 인터폴레이션이 시작부터 종료일정하기 때문에 영향을 받지 않습니다.

방향	설명
In	완화 스타일은 전방향에 적용됩니다.
나가기	완화 스타일은 역방향에서 적용됩니다.
인아웃	완화 스타일은 첫 번째 절반에 대해 앞으로 적용되고 두 번째 절반에 대해 역방향으로 적용됩니다.

방향 완화 - 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 .

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

모듈 스크립트 - 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")
 	-- 캐릭터별 애니메이션이 태그를 부수기 때문에 풍부한 텍스트 태그를 제거하십시오
	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

경험의 원본 언어가 영어가 아닌 경우 , 지역화 설정에서 원본 언어와 일치하도록 로캘 코드를 변경합니다.

적절한 위치에 TextLabel 를 생성하여 부모로 지정된 ScreenGui 내에 있습니다.Create a StarterGui in a suitable location, such as within a parented to .

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

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

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

local label = script.Parent

-- 게임이 지역화된 경우 번역기 로드
--AnimatedUI.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)

이 페이지