[트윈맥스(TweenMax)] 소개

마크업 부터 시작하는 UI/트윈맥스(TweenMax) 2017. 9. 18. 13:46

728x90
반응형

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

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 는 여러 객체를 동일한 애니메이션으로 순차재생 할때 유용하게 사용할 수 있습니다.


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

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


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

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

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

반응형

댓글 4

  • 감사해요 (2018.05.14 23:54)

    예전부터 쭉 관심이 있었던 플러그인 이었습니다.

    근데 영어가 딸려서... 어떻게 따라 해보긴 했지만.. 뭔말인지 해석이 안되어 포기하고 있다가

    오랜만에 구글에 검색하니까 이렇게.. 회복맨님께서 포스팅을 해주셨네요..

    감사해요!!

    • 회복맨 (2018.05.15 00:03 신고)

      방문해 주셔서 감사합니다!
      혹시나 지금이라도 도움이 되는 글이였다면 더 뿌듯할꺼 같습니다 ^^

  • 감사해요 (2018.05.17 15:04)

    네 예전에 이거를 처음 알게되서 구글에 검색했을 때는
    한글로 설명이 되어 있던 곳이 없었거든요...
    그래서.. 포기를 했었는데

    회복맨님이 올려주신 내용 보고 다시 해보려 합니다!
    예전보다 지금 더 엄청 도움이 되죠.