Блог

Главная - Вопросы по программированию - Anime js не распознает и не следует по пути svg

Anime js не распознает и не следует по пути svg

#javascript #svg #anime.js

#javascript #svg #anime.js

Вопрос:

Я использую animejs впервые. Я опробовал несколько руководств из документации, которая работала с файлом. Затем я попытался использовать SVG с div, который следовал по пути SVG точно так, как показано в этом Codepen, как по какой-то причине div вообще не перемещается.

Примечание: я использую animejs из cdn. Я также пытался загрузить файл и использовать его, но у меня та же проблема.

Вот мой код…

 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>

Ответ №1:

path Переменная, возвращаемая из anime.path("selector"); функции. Как описано в документах, вы должны вызвать его с "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",
});