Question

我想做＆＃34;复杂＆＃34;动画与gsap和svgs。但我不知道最好的办法是什么。最好是创建并导入一个包含所有元素的独特svg，或者更好的是4个不同的svgs？

我有4个不同的角色：一棵树，一盏灯，一张桌子和一个男人。基本上我的动画是移动x上的对象，然后出现和消失的东西。

Answer 1

如果动画元素是一个复杂动画的一部分，则可以使用一个SVG。

要通过CSS和JavaScript控制SVG的DOM，您需要将SVG直接内嵌到HTML页面中。不通过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进行响应。

gsap animation - 只导入一个svg或多个svgs

1 个答案: