[입문] TWEENMAX 트윈맥스 배우기 1 - 기본

평소 CSS Transition, Animation으로 HTML 애니메이션 작업을 많이 하는 편이었는데,

이벤트성 페이지에선 작업이 많을경우 소스가 길어지는것도 있고 복잡해져 한계가 있다.

jquery animation 역시 부드럽게 보이지 않을 때도 있으므로,

애니메이션 라이브러리인 TWEENMAX로 처리하는게 좋을것으로 판단하여

트윈맥스 공부를 시작하고자 사용법 포스팅을 시작하였다.

트윈맥스는 greensock 에서 만든 라이브러리로 

https://greensock.com/

위 사이트에 접속하여 다운을 받거나 cdn을 연결해주면 사용이 가능하다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>

- 기본 템플릿

.to()

트윈맥스에서 가장 기본적으로 사용하는 것은 TweenMax.to() 이다.

.to()는 일반적으로 .animate() 라고 생각하면 된다.

트윈맥스는 TweenMax.to(target, duration, {vars}); 의 파라미터를 가지고 있다.

target : 대상(인자)

duration : 지속시간 (몇초동안)

vars : 대상에 부여할 키값

간단한 예시로 CSS 변경 애니메이션에 대해 확인해보자.

일반적인 CSS 키값은 동일하지만 background-color, border-radius같은 특수문자가 들어가 있는건

특수문자를 제외해주고 - 뒤의 첫 알파벳을 대문자로 표시해주면 된다.

target은 제이쿼리 형태로 사용해도 되고 아니어도 된다. (EX. $(".logo") )

트윈맥스가 jQuery 엔진을 의존하지 않기 때문에 유연하게 선택자를 사용해도 된다.

.from()

.to()는 트윈맥스 값을 최종 지점에 보여주었다면 .from()은 시작 지점에서 값을 보여준다.

위와 같은 소스에서 from으로 바꾸어주면 하단처럼 보이게 된다.

.fromTo()

fromTo는 두가지 애니메이션 값을 주어 from에 지정된 값 -> to에 지정된 값 으로 애니메이션이 보여지게 한다.

.staggerFrom()

staggerFrom은 target(대상)이 배열 속성으로, 시작 시간을 지정된 시간만큼 엇갈리게 작동하게 하여

균일하게  띄우는 시퀀스를 만드는 파라미터다.

TweenMax.to(target(Array), duration, {vars}, 대상간에 간격시간);

상단 소스를 보면 작동 후 완료 메서드가 추가되었다.

- onComplete : Function - 애니메이션이 완료될 때 호출되어야하는 함수

- onCompleteParams : Array - 함수를 전달할 매개 변수의 배열

ex) onCompleteParams: [element, "param2"]

매개 변수중 하나에서 트윈맥스 자체 참조하려면 {self}로 쓰면 됨.

- onCompleteAll : Function - 전체 트윈 시퀀스가 완료될 때 호출되어야하는 함수

- onCompleteAllParams : Array - 메서드를 전달할 매개 변수의 배열

.TimelineMax

하나의 애니메이션이 아닌 ani1 끝난후 ani2, ani2 끝난후 ani3 … 식의 타임라인 제작 가능

TweenMax.to()이 연달아 있는 코드와 비슷하다.

var timeLine = new TimelineMax();
    timeLine.to($('.box'), 1, {backgroundColor: '#ccc'})
            .to($('.box2'), 1, {backgroundColor: '#54c0c7'})
            .to($('.box'), 1, {backgroundColor: '#000'})
            .to($('.box3'), 1, {backgroundColor: '#54c0c7'});