TweenService

작성자 : CHAN

최종 업데이트 : 2021.04.28

-tween으로 사이즈 조절하는 예제 추가 (2021.04.28)

 

참고하면좋은 영상 : www.youtube.com/watch?v=oV8HGhZudgk

Tween은 미리 만들어놓지 않은 애니메이션이 필요할때 사용된다.
part를 이동시키거나, 색깔을 바꾸거나, 크기를 조정하는 것을 반복할때 많이 쓰인다.

CSS의 Animation 속성과 비슷함(작성자의 생각일 뿐입니다 ㅎ)

 

 

Tween 사용법

part를 하나 생성한 뒤, part안에 Script를 생성한다. 

tween 객체를 만들때 추가 설정없이  
local tw = TweenInfo.new(3) 을 하게 되면, 그냥 3초 동안 실행되고, 애니메이션 전으로 돌아가지 않는다.

local part = script.Parent

local tweenService = game:GetService("TweenService")


--트윈 애니메이션정보가 담긴 객체를 만든다.
local tweenInfo = TweenInfo.new(
    5,                          --길이, 몇초동안 실행되는지
    Enum.EasingStyle.Linear,    --style (사진참고)
    Enum.EasingDirection.In,    --EasingDirection (사진참고)
    10,                          --반복횟수
    true,                       --reserve여부, 애니메이션 전으로 돌아올것인지
    5                           --delay between each tween
)

--3초 동안 실행 된다.
--local twi2 = TweenInfo.new(3)

local partInfo = {
    Size = Vector3.new(20,20,20)
    --Color = Color3.new(255,255,0)
}


--트윈객체를 생성한다 ( 파트, tween객체, part table)
local tween = tweenService:Create(part,tweenInfo,partInfo)

--트윈애니메이션 플레이
tween:Play()

트윈객체를 생성할때, EasingStyle과 EasingDirection은 밑에 이미지를 참고하자 

Create: 는 내장함수이고 ( 파트, tween객체, part의 정보가 담긴 테이블) 이 들어가야 한다.

 

 

좌 : EasingStyle 속성 / 우 : EasingDirection의 속성

 

 

실행 결과

 

 

 

 

 

 

공식홈페이지 내용

Tween은 인스턴스의 속성을 보간하는 데 사용됩니다. 이것은 다양한 Roblox 개체에 대한 애니메이션을 만드는 데 사용될 수 있다. TweenService를 사용하여 거의 모든 숫자 속성을 tweening 할 수 있다. 특정 유형의 속성만 TweenService와 함께 사용할 수 있다는 걸 유의하자. tweening 할 수있는 속성 유형은 다음과 같다.

##tweening: 키프레임 사이를 자동으로 채워주는 기능. ##

• number
• bool
• CFrame
• Rect
• Color3
• UDim
• UDim2
• Vector2
• Vector2int16
• Vector3
• EnumItem

 

TweenService의 생성자 함수인 TweenService:Create는 애니메이션에 대한 정보를 가져와 애니메이션 재생에 사용할 수있는 Tween 객체를 생성한다. Tween은 동시에 여러 속성을 animate 할 수 있다.

 

트윈의 보간을 수행하는 방법에 대한 자세한 내용은 TweenService:Create ()의 tweenInfo 파라미터에 나와 있다. TweenInfo 데이터 유형에는 Tween 반전 및 반복을 포함하여 다양한 스타일의 애니메이션을 구현하는 데 사용할 수 있는 다양한 속성이 포함된다.

 

동일한 객체에서 동시에 여러 Tween을 재생할 수 있지만, 동일한 속성을 animating 해서는 안된다. 두 Tween이 동일한 속성을 수정하려고 하면 초기 Tween이 취소되고 가장 최근 Tween으로 덮어 쓰게 된다. 

 

GuiObject:TweenSizeAndPosition과 같은 객체 트위닝을 위한 다른 메서드가 존재하지만, TweenService를 사용하면 여러 속성을 수정할 수 있으며 언제든지 애니메이션을 일시 중지 및 취소 할 수 있다.

 

[Functions]

Create

TweenService의 Create 함수는 새 Tween을 만든다. 이 함수는 트위닝 할 객체, 사용할 TweenInfo, 트위닝 할 속성과 트위닝 할 값이 포함 된 테이블, 이렇게 세 가지 인수를 사용한다.

 

[Code Samples]

Tween Creation

이 예제에서는 부품의 위치와 색상에 애니메이션을 적용하기 위해 Tween이 생성된다. 위치와 색상이 동일한 Tween의 일부이기 때문에 정확히 동일한 속도로 변경되고 동시에 목표에 도달하게 된다.

local TweenService = game:GetService("TweenService")
 
local part = Instance.new("Part")
part.Position = Vector3.new(0, 10, 0)
part.Color = Color3.new(1, 0, 0)
part.Anchored = true
part.Parent = game.Workspace
 
local goal = {}
goal.Position = Vector3.new(10, 10, 0)
goal.Color = Color3.new(0, 1, 0)
 
local tweenInfo = TweenInfo.new(5)
 
local tween = TweenService:Create(part, tweenInfo, goal)
 
tween:Play()

 

Tween Conflict

이 코드 샘플에는 트윈 충돌 데모가 포함되어 있다. Workspace에서 Part가 인스턴스화되고 충돌 방향으로 Part을 이동시키려는 두 개의 트윈이 생성된다.

 

두 트윈이 모두 재생되면 첫 번째 트윈이 취소되고, 두 번째 트윈이 덮어 씌워진다. 이는 Part가 Z 축과 반대로 Y 축을 따라 이동하는 것처럼 보여질 수 있다.

 

이를 더 설명하기 위해, 두 트윈에 대해 Tween.Completed 이벤트에 대한 연결이 이룬다. 트윈을 재생하면 다음이 인쇄됩니다.

tween1: Enum.PlaybackState.Cancelled
tween2: Enum.PlaybackState.Completed

이러한 문구는 두 번째 트윈이 재생되는 즉시 첫 번째 트윈이 취소 (Completed 이벤트 발생)되었음을 보여준다.

local TweenService = game:GetService("TweenService")
 
local part = Instance.new("Part")
part.Position = Vector3.new(0, 10, 0)
part.Anchored = true
part.Parent = game.Workspace
 
local tweenInfo = TweenInfo.new(5)
 
-- create two conflicting tweens (both trying to animate part.Position)
local tween1 = TweenService:Create(part, tweenInfo, {Position = Vector3.new(0, 10, 20)})
local tween2 = TweenService:Create(part, tweenInfo, {Position = Vector3.new(0, 30, 0)})
 
-- listen for their completion status
tween1.Completed:Connect(function(playbackState)
	print("tween1: "..tostring(playbackState))
end)
tween2.Completed:Connect(function(playbackState)
	print("tween2: "..tostring(playbackState))
end)
 
-- try to play them both
tween1:Play()
tween2:Play()

---

참고 링크

developer.roblox.com/en-us/api-reference/class/TweenService

TweenService

developer.roblox.com/en-us/api-reference/function/TweenService/Create

TweenService:Create

추가로 공부할 사항

완전히 이해가 안가서 예제 참고하면서 이해해야 함