Question

在animejs中具有以下动画，我尝试将其变形为一个圆形，但过渡效果不明显。如何将SVG->路径d [0]转换为Inkspace中的圆形或以编程方式转换为圆形？

anime({
  targets: document.getElementById('pathD'),
  d: [
    "m379.98 208.62-53.106-145.11a55.51 56.393 66.123 0 0-36.702-31.339l-139.63-28.821a47.535 48.292 66.115 0 0-44.357 16.364l-87.777 112.66a55.572 56.457 66.128 0 0-7.7354 47.784l53.124 145.02a55.572 56.457 66.128 0 0 36.684 31.431l139.76 28.844a47.473 48.229 66.11 0 0 44.327-16.37l87.777-112.66a55.479 56.363 66.122 0 0 7.6424-47.801z",
        "m384.94 196.6267c-1e-5 102.36849-85.910 185.35455-191.886 185.35456-105.976 0-191.8868923-82.98606-191.8868934-185.35456-5e-7 -46.20882 17.5050824-88.46829 46.4590604-120.928388 35.189093-39.450245 87.288953-64.426185 145.427833-64.426184 105.9762 2e-6 191.88688 82.986073 191.88688 185.354z"
  ],
  elasticity: 100,
  autoplay: true,
  easing: 'linear',
  duration: 7000,
  direction: "alternate",
  loop: true
  
})

.anim {
    width: 400px;
    height: 422px;
    position: absolute;
    left: -100px;
    top: 260px;
    z-index: -1;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.js"></script>

<div class="anim">
  <svg version="1.1" viewBox="0 0 395 388" xmlns="http://www.w3.org/2000/svg">
    <path id="pathD" d='m388.71 174.43-82.857-144.03a58.268 60.191 0 0 0-43.619-26.313l-148.06-4.0871a49.897 51.544 0 0 0-41.984 25.806l-67.195 136.33a58.334 60.259 0 0 0 1.5695 52.22l82.857 143.93a58.334 60.259 0 0 0 43.619 26.414l148.19 4.0871a49.832 51.477 0 0 0 41.952-25.806l67.195-136.33a58.236 60.158 0 0 0-1.6676-52.22z' fill="#ffad00"/>
  </svg>
</div>

Animejs SVG路径变形-如何使用贝塞尔曲线绘制圆

0 个答案: