gsap 및 svg로 "복잡한"애니메이션을 만들고 싶습니다. 하지만이 방법에 대한 최선의 방법은 무엇인지 모르겠습니다. 모든 요소가있는 고유 한 svg를 만들고 가져 오는 것이 더 낫습니다. 아니면 더 나은 4 가지 svg입니까?gsap animation - 하나의 svg 또는 여러 개의 svg 만 가져 오기
나는 나무, 램프, 책상 및 남자의 4 가지 캐릭터가 있습니다. 기본적으로 내 애니메이션은 x에있는 객체를 이동하고 나타나고 사라지는 것들입니다.
애니메이션 요소가 하나의 복잡한 애니메이션의 일부인 경우 하나의 SVG 만 사용할 수 있습니다.
CSS와 JavaScript를 통해 SVG의 DOM을 제어하려면 HTML 페이지에 직접 SVG를 추가해야합니다. img 태그 또는 객체 태그 등을 통해 포함되지 않습니다.
<body>
<h1>My SVG Animation</h1>
<svg width="100" height="100" viewBox="0 0 300 100">
<circle class="animation-element-01" cx="50" cy="50" r="40"/>
<rect class="animation-element-01" x="150" y="20" width="150" height="150"/>
<!-- etc -->
</svg>
</body>
이 방법의 또 다른 이점은 추가 html 요청이 없다는 것입니다.
전체 애니메이션은 viewBox를 통해 반응 가능합니다.