[javascript] TweenMax를 사용하여 애니메이션의 경로와 궤도를 어떻게 설정할 수 있나요?

27 Nov 2023

javascript

먼저 TweenMax를 다운로드하고 웹 페이지에서 로드한 후에 다음과 같이 사용할 수 있습니다.

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
</head>

TweenMax를 로드한 후에는 to 메소드를 사용하여 애니메이션을 만들 수 있습니다.

var element = document.getElementById("element");

gsap.to(element, {
  duration: 2,
  motionPath: {
    path: "#path",
  },
});

위의 코드에서 element는 애니메이션을 적용할 요소의 ID이고, duration은 애니메이션의 지속시간입니다. motionPath 속성을 사용하여 경로와 궤도를 설정할 수 있습니다. path 속성에는 애니메이션의 경로를 지정하는 요소의 ID를 입력합니다.

이렇게하면 element 요소가 #path 요소를 따라 애니메이션을 실행합니다. #path는 SVG에서 만든 경로 요소 또는 <path> 요소를 나타낼 수 있습니다.

TweenMax를 사용하여 객체의 경로와 궤도를 설정하는 방법입니다. 더 많은 TweenMax 기능을 사용하려면 공식 문서를 참조하시기 바랍니다.