[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의 문서를 참조하십시오.