quad/md/kr/tutorial/6_tween.md

2.5 KiB

Tween - 트윈효과

트위닝

Quad에는 트윈을 도와주는 모듈이 내장되어 있습니다. 이 트윈 모듈은 단순한 Instance들을 넘어서 table 형식도 트윈을 수행할 수 있습니다. 이는 나중에 커스텀 오브젝트를 트윈할 때 유용합니다.
Quad 에서는 실제로 직접적으로 Tween 을 사용할 일은 적으며 추후 설명되는 #!ts register:Tween()로 사용하는것이 권장됩니다.

트윈은 일반적으로 다음과 같이 수행합니다.

=== "용법"

```lua
Tween.RunTween(myFrame,{
    -- 트윈 옵션
    Easing = Tween.Easing.Expo;
    Direction = Tween.Directions.Out;
    Time = 1;
    ...
},{
    -- 프로퍼티 목록
})
```

=== "예제 - 움직이는 버튼"

클릭시 움직이는 버튼을 구현합니다.

```lua
local ScreenGUI = script.Parent
local Quad = require(path.to.module).Init()
local Class = Quad.Class
local Mount = Quad.Mount
local Tween = Quad.Tween

local Frame = Class "Frame"
local TextButton = Class "TextButton"
local on = false

Frame "mainFrame" {
    Size = UDim2.fromOffset(300,300);
    BackgroundColor3 = Color3.fromRGB(255,255,255);
    TextButton "Child" {
        Text = "Click Me!";
        BackgroundColor3 = Color3.fromRGB(255,100,255);
        Position = UDim2.fromOffset(80,100);
        Size = UDim2.fromOffset(20,20);
        [Event "MouseButton1Click"] = function(self,x,y)
            on = not on
            Tween.RunTween(self,{
                -- 트윈 옵션입니다. 아래에서 설명됩니다
                Easing = Tween.Easing.Expo;
                Direction = Tween.Directions.Out;
                Time = 1;
            },{
                -- 트윈할 목표 프로퍼티입니다
                Position = on
                    and UDim2.fromOffset(200,100)
                    or UDim2.fromOffset(80,100);
            })
        end;
    };
}

Mount(ScreenGUI, Store.GetObejct("mainFrame"))
```

트윈 옵션

트윈에는 트윈 옵션이 들어가며, 여기에는 트윈의 방향, 가감속, 시간 등을 설정해줄 수 있습니다.
넣을 수 있는 트윈 옵션은 다음과 같습니다.

{!include/tweenOptions.md!}


트윈 함수

Quad 의 트윈에는 트윈을 멈추거나 트윈중인지 확인하는 등의 작업을 할 수 있는 여러 함수들이 제공됩니다.