1. TweenMax 기본 템플릿

- 기본 템플릿

.to()

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

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

 

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

 

target : 대상(인자)

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

vars : 대상에 부여할 키값

 

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

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

==> Camel 표기법

 

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

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

 

.from()

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

 

.fromTo()

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

 

.staggerFrom()

staggerFrom은 target(대상)이 배열 속성으로, 시작 시간을 지정된 시간만큼 엇갈리게 작동하게 하여 균일하게 띄우는 시퀀스를 만드는 파라미터다.

 

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

 

example

TweenMax.staggerFrom(".box", 1, {
  ease: Back.easeOut,
  opacity: 0,
  y: 200,
  delay: 0.5,
	onComplete:completeHandler, 
	onCompleteParams:["{self}"]
}, 0.2);

var $console = $('#console')

function completeHandler(tween){
	$console.append("<p> tween complete / target text = " + tween.target.innerHTML + "</p>")
}

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

 

- 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'});