로블록스 GUI 애니메이션 간단하게

참고

https://developer.roblox.com/en-us/articles/GUI-Animations

 

https://www.youtube.com/watch?v=HIoZ1Rd0ACw

나는 위 유튜브 영상을 보고, 버튼 애니메이션을 제작했다.

유튜브 영상에서는 고정 값을 넣었는데, 나는 범용으로 쓰기 위해서 원래 크기의 1.1배 0.9배로 지정했다.

local btn = script.Parent
btn.AnchorPoint = Vector2.new(0.5, 0.5) -- 이거 해야, 중앙을 기준을 커졌다 작아졌다 함.

local isHovering = false

-- 기본 사이즈.
local MouseBasicSize = UDim2.new(btn.size.X.Scale, btn.size.X.Offset, btn.size.Y.Scale, btn.size.Y.Offset)

-- 변했을 때, 사이즈 계산.
local MouseEnterSize = UDim2.new(MouseBasicSize.X.Scale * 1.1, MouseBasicSize.X.Offset * 1.1, MouseBasicSize.Y.Scale * 1.1, MouseBasicSize.Y.Offset * 1.1)
local MouseLeaveSize =  MouseBasicSize
local MouseButton1DownSize = UDim2.new(MouseBasicSize.X.Scale * 0.9, MouseBasicSize.X.Offset * 0.9, MouseBasicSize.Y.Scale * 0.9, MouseBasicSize.Y.Offset * 0.9)

-- 마우스가 들어오면.
btn.MouseEnter:Connect(function()
	isHovering = true
	btn:TweenSize(
		MouseEnterSize, 
		Enum.EasingDirection.InOut,
		Enum.EasingStyle.Quint,
		0.1, -- 0.1초 동안.
		true -- 다른 애니메이션이 실행되면, Overriding 할건지. (덮어쓸지.)
	)
end)

-- 마우스가 나가면
btn.MouseLeave:Connect(function()
	isHovering = false
	btn:TweenSize(MouseLeaveSize, Enum.EasingDirection.InOut, Enum.EasingStyle.Quint, 0.1, true)
end)

-- 마우스 왼쪽 버튼이 클릭되면
btn.MouseButton1Down:Connect(function()
	btn:TweenSize(MouseButton1DownSize, Enum.EasingDirection.InOut, Enum.EasingStyle.Quint, 0.1, true)
end)

-- 마우스 왼쪽 버튼 클릭이 해제되면
btn.MouseButton1Up:Connect(function()
	if not isHovering then
		btn:TweenSize(MouseLeaveSize, Enum.EasingDirection.InOut, Enum.EasingStyle.Quint, 0.1, true)
	else
		btn:TweenSize(MouseEnterSize, Enum.EasingDirection.InOut, Enum.EasingStyle.Quint, 0.1, true)
	end
end)

버튼 밑에 스크립트를 넣어주면 된당.