[트윈맥스(TweenMax)] 사용법1

여기서 다루게 될 예제들은 거의 모든 부분을 jsFiddle 로 보여드릴까 합니다.

하지만, 어떤 js파일을 가져와서 써야할지 고민되시는 분들께 스샷과 함께 압축파일을 올려놓겠습니다.

일단 바로 이전 포스팅 http://recoveryman.tistory.com/377 에서 보셨다면 압축파일을 다운로드하는 부분이 있을꺼예요.

압축을 풀고 나오는 폴더 greensock-js 폴더 안에 src 라는 폴더가 있습니다. 그폴더로 접근해 주세요.

src 폴더로 들어왔다면 위에 minified 는 압축된 트윈맥스 소스가 있고 uncompressed 는 압축되지 않은 소스가 있습니다.

minified 로 들어갑니다.

다음과 같은 파일 목록이 있는데 여기서

TweenMax.min.js 를 복사하셔서 사용하시면 됩니다.

또 저는 이런 폴더 구조를 미리 셋팅해 두었습니다.

HTML 코드는 tweenMax.html 파일에서 마크업 하고. css 는 style.css 에서 합니다.

js 는 안에 vendor 라는 폴더를 만들어 놓고 vendor 라는 폴더에는 수정하지 않을, 추가하지 않을 소스를 담아두었습니다. 

새로운 js 코드는 ui.js 에서만 수정하고, 추가하시면 됩니다.

tweenMax.zip

우선 아래 jsFiddle 에서 버튼을 누르면 2초 뒤에 글자가 바뀝니다.

바뀌는걸 확인하셨다면 이 jsFiddle 의 JavaScript탭을 눌러 소스를 보시면

TweenLite.to(obj, 2, {name:"Hello~"});

이런 부분이 보이실 꺼예요.

트윈 맥스의 틀은 저런 형태를 가지고 있습니다.

.to() 는 제이쿼리의 .animate() 라고 생각하시면 조금은 접근하기 쉬울꺼 같아요.

.to 는 총 3개가지의 파라미터를 가지고 있습니다.

TweenLite.to([Selector], [Duration], {Properties:end values})

처음 Selector 은 대상을 뜻합니다. 어떤걸?,

두번째 Duration 는 지속시간 입니다. 몇초동안?

세번째 {Properties:end values} 는 객체의 키와 값입니다. 뭘? 어떻게?

버튼이 없다는 전제하에 더 간단하게 보여드리자면

여기까지 읽으셨으면 아래 jsFiddle 가 보일 때 새로고침을 한번 해주세요.

새로고침을 하면 검은색 박스가 서서히 초록색 박스로 변하는게 보일꺼예요.

저기서 자바스크립트 탭을 보시면 딱 한줄 있습니다.

TweenLite.to($("div"), 3, {backgroundColor:"#00ff00"});

이거 이제 알아보기 쉽나요?

대상이 되는 부분[$("div")], 3초에 걸쳐서[3], 무엇을어떻게?[{backgroundColor:"#00ff00"}] 라는게 한눈에 보일꺼에요.

TweenLite 는 TweenMax 로 쓰셔도 되요.