GSAP 사용하기 2 (애니메이션 제어, 타임라인)

애니메이션 제어

.pause() : 일시중지 / .resume() : 현자리에서 다시 시작 (방향전환 상관없이) / .reverse() : 역방향 (항상 처음으로 돌아감) / .seek(0.5) : 0.5초 지점으로 점프 / .priogress(0.25) : 진행률의 1/4로 점프 / .timeScale(0.5); 절반 속도 (2는 2배속) /

.kill() : 애니메이션이 즉시 중지되고 해제됨 / restart() : 처음부터 다시 시작

See the Pen GSAP - Controlling Animations by hwls8253 (@hwls8253) on CodePen.

 

타임라인을 사용한 시퀀싱

타임라인을 사용하면 복잡한 시퀀스를 짜는게 간단해진다. 타임라인은 애니메이션 전체를 간단하게 제어하고 타이밍을 정확하게 관리할 수 있다. delay를 많이 사용하지 않고 시퀀스를 빌드하며 애니메이션 코드를 모듈화 한다.

기본 시퀀싱

// 타임라인 인스턴스 생성
var tl = gsap.timeline();

// 다음 두 줄은 동일한 작업을 수행합니다.
tl.add( gsap.to(".box1", {duration:2, x:100}) );
tl.to(".box1",{duration:2, x:100}); // 짧은 구문

기본적으로 애니메이션은 순서대로 삽입되지만 위치 매개변수를 사용하여 작업이 진행되는 위치를 정확하게 제어할 수 있다.

 

See the Pen GSAP - Sequencing with Timelines by hwls8253 (@hwls8253) on CodePen.

타임라인 기본값

defaults라는 특수 속성을 사용하여 모든 하위 트윈과 타임라인에서 값을 상속할 수 있다. 상속된 값은 상속된 속성에 대한 새 값을 포함하여 간단히 덮을 수 있다.

var tl = gsap.timeline({defaults: {duration:1}});

// duration:1 반복없음 
tl.to("box1",{x:100})
.to("box2",{x:200, duration:2}) // 상속된 기본값을 덮어 씁니다.
.to("box3",{x:100,scale:.5})

위치 매개변수

tl.to(element, {x:200}, +=1) // 타임라인 종료 1초 후 (갭)
.to(element, {x:200}, -=1) // 타임라인 종료 1초 전 (오버랩)
.to(element, {x:200}, 6) // 타임라인 시작으로부터 6초 후 (절대적)
.to(element, {x:200}, "<") // 이전 트윈 타임라인 시작지점
.to(element, {x:200}, ">") // 이전 트윈 타임라인 종료지점
.addLabel("test") // 타임라인에 레이블 추가 
.to(element, {x:200}, "test") // test라는 레이블 지점

See the Pen GSAP - Timeline Position Parameter by hwls8253 (@hwls8253) on CodePen.

타임라인 제어

타임라인과 트윈은 공통 제어 방법 세트를 공유한다.

See the Pen GSAP - Timeline Control by hwls8253 (@hwls8253) on CodePen.

Getter / Setter 메소드

일반적으로 사용되는 getter/setter 메서드

- time() : repeat 또는 repeatDelay를 포함하지 않는 재생헤드의 현재 시간 (time(1) => 1초후의 상태 부터 시작)

- progress() : 재생헤드의 위치를 나타내는 0 과 1 사이의 값으로 트윈 진행률 (0 시작부분, 0.5 중간부분, 1 끝 부분)

- duration() : repeat 또는 repeatDelay를 포함하지 않는 애니메이션의 지속 시간

- delay() : 애니메이션의 초기 지연 시간

- timeScale() : 애니메이션 속도 조정 (1 정상속도, 0.5 반 속도, 2 두 배 속도)

See the Pen GSAP - timeScale() by hwls8253 (@hwls8253) on CodePen.

요소 속성의 현재 값 얻기

트윈의 콜백 함수 내에서 this.targets()를 사용하여 트윈이 영향을 미치는 대상의 배열을 가져올 수 있다. (화살표 함수 내에서 작동 X) 특정 요소의 현재 값을 가져오려면 (화살표 함수 포함) GASP의 .getProperty() 메서드를 사용하는 것이 좋다

See the Pen Untitled by hwls8253 (@hwls8253) on CodePen.