SVG Morphing анимация дает действительно странные результаты - PullRequest
Новая
       7

SVG Morphing анимация дает действительно странные результаты

0 голосов
/ 09 июня 2019 

anime({
            targets: ".a",
            d: [
                {value: "M0,0,33.32,31.1l89.963,43.315L146.606,0Z"}
            ],
            easing: "easeOutQuad",
            duration: 2000,
            loop: false,
        });
  html, body {
            margin: 0;
            padding: 0;
        }

        svg {
            margin-top: 100px;
        }

        path {
            fill:none;
            stroke:#8103ff;
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>



<svg xmlns="http://www.w3.org/2000/svg" width="149.606" height="92.963" viewBox="0 0 149.606 92.963">
        <path class="a" d="M0,0V89.963L123.282,74.414,146.606,0Z">
 </svg>
 
<br>
<h5>The SVGs in their raw forms: </h5>
 
 <svg xmlns="http://www.w3.org/2000/svg" width="149.606" height="92.963" viewBox="0 0 149.606 92.963">
        <path d="M0,0V89.963L123.282,74.414,146.606,0Z">
 </svg>
 
 <svg xmlns="http://www.w3.org/2000/svg" width="149.606" height="92.963" viewBox="0 0 149.606 92.963">
        <path d="M0,0,33.32,31.1l89.963,43.315L146.606,0Z">
 </svg>

Итак, у меня есть SVG, который я хочу преобразовать с помощью anime.js.А также, код SVG экспортируется через Adobe XD.

У меня проблемы с реализацией SVG-анимации любого вида.Даже самые простые.Конечный результат странный.

Я пытался искать в Stack Overflow и на других сайтах, но я не нашел ничего, что могло бы решить мою проблему.Я попытался перерисовать фигуру 10 раз, стараясь нарисовать одинаковое количество опорных точек на обоих SVG.Но по-прежнему не удается правильно нарисовать анимацию.

Допустим, у меня есть эти 2 SVG, которые претерпели действительно "бесполезные" изменения.

Дело в том, что я ожидаю, что они изящно пойдут изодно состояние в другое, но вместо этого они просто странно и неуместно.Это то, что я делаю не так?Спасибо.

...