[트윈맥스(TweenMax)] 소개

최근들어 트윈맥스에 관심이 많아져서 포스팅 합니다.

jQuery 의 animate 와 무엇이 다른지, 어째서 이걸 사용하는지 아래 jsfiddle 를 봐주세요!

잘 보면 jQuery animate 의 움직임이 조금 부자연 스러운게 보입니다.

현재 이 jsFiddle 는 jquery 1.9.1 버전을 사용하고 있습니다.

상위 버전의 jQuery 를 사용하면 둘이 별로 다를게 없어 보일 수 있습니다.

그럼 배경색 변환을 시도해 보겠습니다.

자연스럽게 배색을 변환 시켜 주기위해 애니메이션이 필요합니다.

트윈맥스를 사용하면 배경색을 바꿔줄 수 있지만

jQuery animate 메소드는 배경색을 변경시켜주지 못합니다.

이뿐만이 아니라.. 움직임에 효과를 줄 수 있는 easing 기능도 기본 탑재되어 있습니다.

jQuery 로는 다른 플러그인 까지 함께 사용해야 합니다.

거의 한번에 많은걸 해결해줄 수 있을꺼 같습니다.

이 기능을 사용하기 위해서 greensock 에서 플러그인을 다운 받거나 cdn을 연결해 주면 됩니다.

https://greensock.com/

위 사이트에 접속하셔서 스크롤을 조금 내리면 DOWNLOAD GSAP 가 있습니다.

버튼을 클릭하면 어떤 방식으로 이걸 사용할건지 선택합니다.

보통 다운로드 많이 하시는데, 적당히 테스트 부터 하실꺼면 아래 script 코드를 복사하시는 것도 괜찮습니다.

저는 다운받아서 사용해 보겠습니다.

다운로드 받았다는 가정하에 압축 파일을 풀면 getting_started.html 라는 HTML 파일이 있습니다. 이걸 한번 열어봤습니다.

위와 같은 페이지가 뜨며 주소는 https://greensock.com/get-started-js 입니다.

이 페이지에선 사용 방법등이 자세히 표시되어 있지만 영어라서 하나하나 해보겠습니다.

이 페이지에서 스크롤을 조금 내리면

TweenLite, TweenMax, TimelineLite, TimelineMax 총 4가지에 대한 설명이 나옵니다.

TweenLite 는 애니메이션을 처리하는 내용을 담고 있습니다. 꼭 필요한 부분만을 담고 있다고 합니다.

TweenMax 는 TweenLite 보다 더 많은 기능을 수행하는 일종의 확장판 인거 같습니다.

TimelineLite 는 애니메이션의 시간순차적으로 진행되게 조작합니다.

TimelineMax 는 여러 객체를 동일한 애니메이션으로 순차재생 할때 유용하게 사용할 수 있습니다.

트윈맥스는 애니메이션이 마치 플래시 처럼 부드럽게 동작하게 하는걸 알 수 있습니다.

타임라인은 좀 생소할꺼예요.

이걸 보시면 금방 아실듯 합니다.

제이쿼리 콜백과 비슷하죠?

간단하게 사용할 수 있습니다.