[입문] TWEENMAX 트윈맥스 배우기 2 - 메서드

KEY METHODS

- 기본 메서드 

TweenMax.to : this 속성에서 지정한 속성까지

TweenMax.from :  지정한 속성에서 this 속성까지

TweenMax.fromTo :  from에서 지정한 속성에서 to에서 지정한 속성까지

ex) TweenMax.fromTo(target, duration, {from vars}, {to vars});

TweenMax.allTo / TweenMax.allFrom : for문 없이 여러 target을 동시에 적용

기본 구문: TweenMax.allTo(targets:Array, duration:Number, vars:Object):Array 

ex) TweenMax.allTo([mc1, mc2, mc3, mc4, mc5], 1, {y:"100", alpha:0, delayIncrement:0.2});

delayIncrement : Number - 각 target들 간에 delay
onCompleteAll : Function - onComplete은 각 target이 complete될때마다 각각 호출
                         - onCompleteAll은 tween이 다 끝나고 한번만 호출
onCompleteAllParams : Array

TweenMax.set() : 요소에 애니메이션 없이 style(css)을 설정한다. 

TweenMax.isTweening(target:Object):Boolean 

- 여러 대상 실행

TweenMax.staggerTo() / TweenMax.staggerFrom() : Array, 각 요소에 순차적으로 애니메이션을 실행시킨다

TimelineMax : 하나의 애니메이션이 아닌 ani1 끝난후 ani2, ani2 끝난후 ani3 … 식의 타임라인 제작 가능

TweenMax.to()이 연달아 있는 코드와 비슷하다.

- 모션 제어

repeat(number) : 반복구문이며 number은 1부터 시작이다.

-1을 넣으면 무한반복이 된다.

delay가 있는 경우 첫번째 재생만 delay가 적용되고 repeat되는 동안은 delay가 적용되지 않는다.

TweenMax.to(".box", 1, {backgroundColor: '#54c0c7',repeat: 1});

var tween = TweenMax.to(".box", 1, {backgroundColor: '#54c0c7'});
tween.repeat(1);

repeatDelay() : 반복 지연시간을 초 단위로 지정할 수 있다.

yoyo() : Boolean, 애니메이션을 앞뒤로 반복하여 실행시켜준다.

repeat가 (A->B) * (number) 의 반복이라면 yoyo는 (A->B~B->A)*(number) 의 반복이다.

TweenMax.to(".box", 1, {padding: 20, repeat: 1, yoyo: true});

.reverse() : 애니메이션 재생을 되돌린다.

.reversed() : 애니메이션이 역방향으로 재생되어야하는지에 대한 여부 및 설정

isActive() : 애니메이션 활성화 여부를 나타낸다

See the Pen check isActive() by GreenSock (@GreenSock) on CodePen.

TweenMax.delayedCall(delay:Number, onComplete:Function, onCompleteParams:Array); 
 -target 없이 함수를 delay : (1.0 ==> 1초) 후에 호출
 

● kill관련 : 트윈 기능 없애는 메서드

TweenMax.killAll()

- 전체 트윈 기능 없앰

TweenMax.killDelayedCallsTo(function:Function);
 -해당 delayedCall함수를 kill 함
 
TweenMax.killAllTweens(complete:Boolean):void 
 -false(default) : pause() 처럼 보이면서 tween kill
 -true : complete 화면을 보여주고 tween kill
 -delayedCall은 kill안됨

pause(): void, 현재 위치에서 일시 중지 

paused(): void, 애니메이션이 현재 일시 중지 되었는지에 대한 여부 및 설정

resume() : (suppressEvents : Boolean) 방향을 바꾸지 않고 재생을 계속합니다.

그 외 상세 메서드는 greensock에서 살펴보면 된다.

https://greensock.com/docs/TimelineMax