[javascript] TweenMax에서 애니메이션의 반복과 움직임을 어떻게 변경할 수 있나요?

1. 애니메이션 반복하기

TweenMax의 repeat 메서드를 사용하여 애니메이션을 반복할 수 있습니다. repeat 메서드는 반복 횟수를 매개변수로 받습니다. -1을 지정하면 애니메이션이 무한히 반복됩니다.

// 애니메이션을 3번 반복하는 예제
TweenMax.to(element, 1, { x: 100, repeat: 3 });

2. 애니메이션 되감기

TweenMax의 yoyo 메서드를 사용하면 애니메이션이 앞뒤로 되감기 움직임을 수행합니다. yoyo 메서드에 true를 전달하여 이 기능을 활성화할 수 있습니다.

// 앞뒤로 반복되는 움직임을 수행하는 예제
TweenMax.to(element, 1, { x: 100, yoyo: true });

3. 애니메이션 속도 조절

TweenMax의 easing 옵션을 사용하여 애니메이션의 속도를 조절할 수 있습니다. easing 옵션에는 여러 가지 이징 함수(Easing Function)를 사용할 수 있습니다. 기본값은 Power0.easeNone으로 일정한 속도로 애니메이션이 진행됩니다.

// easeOutQuart 이징 함수를 사용하여 느리게 시작하는 예제
TweenMax.to(element, 1, { x: 100, ease: Power4.easeOut });

이외에도 TweenMax는 다양한 애니메이션 옵션을 제공합니다. 자세한 내용은 TweenMax의 문서를 참조하십시오.