[트윈맥스(TweenMax)] 곡선(bezier curve) 움직임

트윈맥스로 움직임이 필요한 엘리먼트에 유연한 애니메이션 진행을 표현할 수 있는 메서드가 존재합니다.

사용 방법에 대한 글을 쓰기에 앞서 도데체 어떤 방법으로 곡선방향을 만들어 낼 수 있는지 알아보는게 좋습니다.

위키백과 베지어 곡선 링크: https://en.wikipedia.org/wiki/B%C3%A9zier_curve

일단 핵심 내용은 이렇습니다.

선형(扇形: 부채꼴)은 두 점 사이의 직선일 뿐이다.

부채를 보면 각져있는것 보다는 약간 휘어져 있습니다. 아 물론 네모난 부채도 충분히 있지만요..

부채하면 딱 떠오르는 그런 물건을 생각하시면 됩니다.

그리고 곡선이 어떻게 만들어 지는지 움짤로 보여드리겠습니다.

음... ㅋㅋㅋ

직접 제작한 움짤입니다. ㅋㅋㅋㅋ

마지막에 곡선이 이렇게 생긴다 라는걸 굵은 선으로 그렸습니다.

만약에 S 자를 만든다고 가정하면,

끔찍하죠.. 저런걸 수도없이 만들어야 한다니...

만약에 트윈맥스 없이 제이쿼리로 저런 움직임을 표현해야 한다면 저렇게 촘촘히 선을 그려가며 좌표값을 찍고 0.01초 단위로 엘리먼트를 이동시켜야 할꺼에요.

우선 간단한 S 자형 곡선 애니메이션을 만들어 보겠습니다.

다음의 사진을 봐주세요.

이렇게 S 자형으로 만들어 보겠습니다.

jQuery animate 메서드로 만들면 어떻게 될까요?

javascript 탭을 보면 아주 가관입니다.

반복을 위해서 콜백을 넣어주면 아주 쉽게 콜백지옥을 체험할 수 있습니다.

문제는 그 뿐만이 아닙니다.

setInterval 사용시 원하는 위치로 이동이 안될 수 있습니다.

일단 위치야 그렇다 치더라도 원하는 S 자형 곡선 움직임이 전혀 안되죠.

제이쿼리의 animate 메서드를 이용하면 직선의 움직임만 볼 수 있습니다.

일단 이 포스팅은 트윈맥스를 사용해서 곡선의 애니메이션을 사용할 것이기 때문에 트윈맥스 라이브러리를 로드시켜 줍니다.

트윈맥스 소개: http://recoveryman.tistory.com/377

우선 트윈맥스를 어떠한 형태로든 html 에 포함시켜 줘야 합니다. 그게 CDN이 되었든지 파일이 되었든지 상관 없습니다.

그리고 원하는 엘리먼트에 id 혹은 class명을 줍니다.

준비가 되셨다면 베지어를 사용한 코드를 여기에 작성하겠습니다.

TweenMax.to(document.getElementById("box"), 3, {
    bezier:[
        {left:100, top:250},
        {left:200, top:0},
        {left:300, top:100}
    ], ease:Power1.easeInOut, repeat: -1, yoyo: true
});

우선 이 코드는 CSS 의 position 값에 영향을 받습니다. 이 코드를 사용 시 position 속성이 없다면 사용이 불가능 합니다.

이 코드는 지정된 값을 사용하여 "left"와 "top"의 css 속성을 트윈합니다.

정말 딱 원하는 형태의 S 자형 굴곡을 보여주고 있고 animate 메소드를 사용했던 것과는 달리 문제점 또한 전혀 보이질 않네요.

코드도 정말 직관적이여서 알아보기 쉽겠죠?

ease, repeat, yoyo 등의 키값은 저의 트윈맥스 포스팅을 읽어보셨다면 금방 아실꺼예요!

반복(repeat), 되돌림(yoyo): http://recoveryman.tistory.com/382

이징(easing): http://recoveryman.tistory.com/380

그런데 이것 말고도 다양한 곡선 움직임이 있습니다!

아래를 보시면 바로 아실꺼예요.

일단 css 탭을 보시면 움직임을 준 box에 position 속성이 없습니다.

자바스크립트 탭을 보시면 left 와 top 이 각각 x 와 y 라는 키값으로 변경되었어요.

TweenMax.to(document.getElementById("box"), 3, {
    bezier:{
        curviness:1.25,
        values:[
            {x:100, y:250},
            {x:200, y:0},
            {x:300, y:100}
        ], autoRotate: true
    }, ease:Power1.easeInOut, repeat: -1, yoyo: true
});

x와 y키값을 사용할 때에는 position 값이 없어도 트윈이 됩니다.

curviness 는 커브의 강도 입니다. 이 값이 높으면 높을수록 더욱더 역동적(?)인 커브를 합니다.

values 는 위치값 입니다.

autoRotate 라는건 true 를 넣을 시 '곡선의 움직임 방향'으로 엘리먼트가 틀어져 있습니다. false를 넣으면 진행방향이 어찌되었든지간에 엘리먼트의 틀어짐 없이 이동합니다.

또 있습니다!

이걸 보시면 바로 위와 뭐가 다른건지 잘 모를 수 있지만 스크롤을 올려가며 내려가며 뭐가 다른지 비교해 보시면 차이가 약간 느껴지실꺼예요!

자바스크립트 탭을 보면 이렇습니다.

TweenMax.to(document.getElementById("box"), 3, {
    bezier:{
        type:"soft",
        values:[
            {x:100, y:250},
            {x:200, y:0},
            {x:300, y:100}
        ], autoRotate:true
    }, ease:Power1.easeInOut, repeat: -1, yoyo: true
});

여기서 type 라는 키가 생겼네요!

type키에 값을 soft 로 넣어주면 커브를 돌때 보다 부드러운 느낌으로 커브를 돕니다.

기본값은 thru 입니다. 쓰루는 부드러운 커브를 도는게 아니라 휙휙 커브를 도네요.