[javascript] TweenMax를 사용하여 애니메이션의 변형(transform)을 어떻게 조작할 수 있나요?
요소의 변형(transform)을 조작하기 위해 TweenMax의 to() 메서드를 사용할 수 있습니다. to() 메서드는 요소의 초기 상태와 최종 상태를 지정하고, 애니메이션의 지속 시간(duration)과 이징(easing) 함수를 설정할 수 있습니다.
다음은 TweenMax를 사용하여 애니메이션의 변형을 조작하는 기본적인 예제입니다.
// HTML 요소 선택
const element = document.getElementById('myElement');
// 요소의 변형 애니메이션 생성
TweenMax.to(element, 1, {
x: 100, // x 축으로 100px 이동
y: 200, // y 축으로 200px 이동
rotation: 180, // 180도 회전
scale: 2, // 2배 확대
opacity: 0.5, // 투명도 0.5
ease: Power1.easeInOut // 이징 함수 설정
});
위 코드는 요소의 x, y 위치를 이동시키고, 회전하며, 확대/축소하며, 투명도를 조절하는 애니메이션을 생성합니다. 애니메이션의 지속 시간은 1초로 설정되어 있고, 이징 함수는 Power1.easeInOut으로 설정되어 있습니다.
TweenMax 라이브러리의 다양한 기능과 사용법에 대한 자세한 내용은 GreenSock의 공식 문서를 참조하세요.