JS에서 TweenMax 사용하기 [ 1 ] – 기본적인 사용법

기본적인 사용법

박스 하나를 그려놓고 투명도를 0으로 해놓겠습니다.

HTML

<section></section>

CSS

section {
	width: 100px;
	height: 100px;
	background-color: #000;
	opacity: 0;
}

트윈맥스에서 가장 많이 쓰이는 메소드는 to() 입니다. 트윈맥스를 이용해 투명도가 1로 증가하는 5초짜리 애니메이션을 만들어보겠습니다.

JS

TweenMax.to( $( "section" ), 5, { opacity: 1 } );

[ 예제 1 ]

to() 메소드는 총 세개의 인자를 받습니다.

TweenMax.to( 대상오브젝트, 시간, 속성 )
  • 대상 오브젝트 : 애니메이션을 적용할 대상입니다. DOM 객체가 아닌 JS 객체도 가능합니다.
  • 시간 : 애니메이션이 진행될 총 시간입니다. 초단위로 입력합니다.
  • 속성 : 애니메이션이 적용될 속성입니다. 주로 CSS 속성을 입력합니다.

from() 메소드

위 코드는 몇 가지 문제점을 포함하고 있습니다.
우선, CSS에 opacity 속성은 구형 IE 브라우저를 지원하지 않습니다. 구형 IE 브라우저에서는 투명도가 조정되지 않은 상태로 보여지기 때문에, 애니메이션이 진행되는 것 처럼 보이지 않을 것입니다. 해결책으로 -ms-filter를 추가해주는 방법이 있겠지만, 트윈맥스만 가지고 해결할 수도 있을 것 같습니다.

from() 메소드는 to() 메소드와 동일하게 사용하지만, 마지막 인자로 전달하는 속성이 애니메이션이 진행될 목표값이 아니라 애니메이션의 초기값이 됩니다. 입력한 속성에서 현재 상태의 속성까지 역으로 애니메이션이 만들어집니다.

CSS에서 opacity 속성을 제거해 보겠습니다.

section {
    width: 100px;
    height: 100px;
    background-color: #000;
}

JS도 수정해줍니다.

TweenMax.from( $( "section" ), 5, { opacity: 0 } );

[ 예제 2 ]

트윈맥스에서 opacity 속성을 변경하면 IE의 필터 처리까지 트윈맥스가 내부에서 다 처리를 해줍니다. 쉽게 브라우저 호환성에 대한 해결을 할 수 있습니다.

트윈맥스의 기본적인 사용법에 대해서 알아보았습니다.
다음으론 트윈맥스의 특수 속성(Special Properties)에 대해서 알아보겠습니다.

JS에서 TweenMax 사용하기 [ 1 ] – 기본적인 사용법”에 대한 3개의 생각

  1. 박순길

    좋은 정보 감사합니다. 두 가지 글만 보고서도 Tween Max 에 대한 오해가 풀렸네요. 연재 부탁드려요. 🙂

    응답

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다