动漫 js 不识别或不遵循 svg 路径答案

【问题标题】：Anime js does not recognise or follow svg path动漫 js 不识别或不遵循 svg 路径
【发布时间】：2020-10-19 13:25:16
【问题描述】：

我是第一次使用animejs。我从工作文件的文档中尝试了一些教程。然后，我尝试使用带有 div 的 SVG，该 div 完全按照Codepen 中所示的方式显示，由于某种原因，div 根本不移动。

注意：我使用的是来自 cdn 的animejs。我也试过下载文件并使用它，但我遇到了同样的问题。

这是我的代码...

window.onload = () => { 
  var path = anime.path("path");
  anime({
      targets: "div",
      translateX: path,
      translateY: path,
      rotate: path,
      duration: 3000,
      loop: true,
      easing: "linear",
  });

  anime({
      targets: "path",
      opacity: 0,
      duration: 6000,
      loop: true,
      direction: "alternate",
      easing: "easeInOutExpo",
  });
}

body {
    background: grey;
}
div,
.green {
    position: absolute;
    background: green;
    top: 0.5rem;
    left: 0.5rem;
    width: 1rem;
    height: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.js"></script>
<body>
  <section>
    <article>
      <svg>
        <path
              fill="#000"
              stroke="#000"
              d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"
              />
      </svg>
      <div class="green"></div>
    </article>
  </section>
</body>

【问题讨论】：

标签： javascript svg anime.js

【解决方案1】：

从anime.path("selector"); 返回的path 变量是函数。如docs 中所述，您应该使用"x"、"y" 或"angle" 调用它

var path = anime.path("path");
anime({
  targets: "div",
  translateX: path("x"),
  translateY: path("y"),
  rotate: path("angle"),
  duration: 3000,
  loop: true,
  easing: "linear",
});

【讨论】：