[javascript] TweenMax에서 애니메이션의 효과를 루프(loop)로 반복할 수 있나요?
TweenMax에서 애니메이션을 루프로 설정하려면 repeat
속성을 사용하면 됩니다. 이 속성은 애니메이션을 반복하는 횟수를 설정할 수 있습니다. 예를 들어, 애니메이션을 무한히 반복하려면 repeat: -1
로 설정하면 됩니다.
아래는 TweenMax를 사용하여 애니메이션을 루프로 반복하는 코드의 예시입니다.
// HTML 요소 선택
var element = document.getElementById('myElement');
// TweenMax를 사용하여 애니메이션 생성
var animation = TweenMax.to(element, 1, {
x: 200,
repeat: -1, // 무한 반복 설정
yoyo: true // 애니메이션을 전진 및 후진으로 반복
});
// 애니메이션 시작
animation.play();
위의 예시에서는 x
속성의 값이 200으로 변경되는 애니메이션을 무한히 반복하도록 설정했습니다. 또한 yoyo
속성을 true
로 설정했으므로 애니메이션은 전진 및 후진으로 반복됩니다.
더 많은 TweenMax 옵션 및 메서드에 대한 자세한 내용은 공식 문서를 참조하시기 바랍니다.
- TweenMax 공식 문서: https://greensock.com/docs/v3/GSAP/TweenMax