尝试使用AnimeJS进行变形时，为什么我的SVG路径会跳跃？

Question

我正在尝试变形形状。我知道它可以与多边形一起使用。我也可以使用具有3点的简单路径进行变形，但是当我尝试使用实际的SVG做某事时，它只会抛出很多错误，并且是超级越野车。我所做的只是稍微移动了一些点和锚点手柄。变形后的最终结果是正确的，但实际的动画完全不是我想要的。变形路径是原始副本的副本，其中某些点已更改。因此，点的数量和路径方向应该相同。我什至签到了Illustrator。

let test = anime({
    targets: `.test path:last-of-type`,
    d: [
        { value: 'M113.14,116.59a8,8,0,0,1-3.26-15.31,45.79,45.79,0,0,0,0-83.69A8,8,0,1,1,116.38,3a61.79,61.79,0,0,1,0,112.93A8,8,0,0,1,113.14,116.59Z' },
        { value: 'M113.14,116.59a8,8,0,0,1-3.26-15.31c16.52-7.35,13.84-33.54,27.19-41.85s-10.67-34.5-27.19-41.84A8,8,0,1,1,116.38,3c22.29,9.91,44.73,38.64,21.45,82.6,0,24.39.84,20.41-21.45,30.33A8,8,0,0,1,113.14,116.59Z' }
    ],
    easing: 'easeOutSine',
    duration: 2000,
    loop: false,
    complete: function(anim) {
        anim.reverse();
    },
    autoplay: false
});

Live example

Answer 1

要实现平滑的动画，必须在所有路径中匹配节点点的数量及其类型。

在矢量编辑器中查看路径。

大半圆比小半圆多一个节点。图中用红色箭头指示了一个额外的点。

必须删除一个额外的点，以便两个路径上的节点点数相同。
编辑后，保存文件并将路径复制到另一个文件以创建动画。

使用SVG SMIL动画

<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    width="25vw" hieght="25vh" viewBox="0 0 153.07 118.86">
    <path d="M75.75,8.72V110.15a8.7,8.7,0,0,1-14.83,6.18L35.13,90.74a11.26,11.26,0,0,0-8-3.27H11.29A11.29,11.29,0,0,1,0,76.18V42.68A11.28,11.28,0,0,1,11.29,31.4H27.18a11.27,11.27,0,0,0,8-3.28L60.92,2.54A8.7,8.7,0,0,1,75.75,8.72Z"/>
    <path d="M98.63,86.72a8,8,0,0,1-2.85-15.48,12.62,12.62,0,0,0,0-23.61,8,8,0,0,1,5.68-15,28.63,28.63,0,0,1,0,53.52A7.94,7.94,0,0,1,98.63,86.72Z">
     <animate
       attributeName="d"
       begin="0s"
       dur="1s"
       repeatCount="indefinite"
       values="
          m 98.63,86.72 c -8.896613,0.01429 -11.168355,-12.324863 -2.85,-15.48 10.87779,-4.111221 10.87779,-19.498779 0,-23.61 C 91.637862,46.06151 89.551515,41.432137 91.120003,37.290001 92.688492,33.147866 97.317862,31.06151 101.46,32.63 c 11.10918,4.225054 18.45261,14.874508 18.45261,26.76 0,11.885492 -7.34343,22.534946 -18.45261,26.76 -0.90058,0.361333 -1.859762,0.554526 -2.83,0.57 z;
        m 120.63,116.72 c -13.84288,4.29526 -17.65743,-9.06575 -10.85,-13.48 35.6227,-19.637776 34.69936,-61.423453 7.12758,-81.035919 C 110.18826,18.209024 104.23624,11.222661 108.01033,5.3312852 110.87272,0.86306533 113.31786,1.06151 117.46,2.63 c 10.57498,4.7592492 35.07508,19.514212 34.45261,56.76 -0.37039,22.162492 -8.1082,37.551535 -18.83964,49.45716 -0.90058,0.36133 -9.08042,7.1019 -12.44297,7.87284 z" /> 
    </path> 
    <path d="m 98.63,86.72 c -8.896613,0.01429 -11.168355,-12.324863 -2.85,-15.48 10.87779,-4.111221 10.87779,-19.498779 0,-23.61 C 91.637862,46.06151 89.551515,41.432137 91.120003,37.290001 92.688492,33.147866 97.317862,31.06151 101.46,32.63 c 11.10918,4.225054 18.45261,14.874508 18.45261,26.76 0,11.885492 -7.34343,22.534946 -18.45261,26.76 -0.90058,0.361333 -1.859762,0.554526 -2.83,0.57 z"/></svg>

AnimeJS的动画变体

const small = 'm 98.63,86.72 c -8.896613,0.01429 -11.168355,-12.324863 -2.85,-15.48 10.87779,-4.111221 10.87779,-19.498779 0,-23.61 C 91.637862,46.06151 89.551515,41.432137 91.120003,37.290001 92.688492,33.147866 97.317862,31.06151 101.46,32.63 c 11.10918,4.225054 18.45261,14.874508 18.45261,26.76 0,11.885492 -7.34343,22.534946 -18.45261,26.76 -0.90058,0.361333 -1.859762,0.554526 -2.83,0.57 z';
const big = 'm 120.63,116.72 c -13.84288,4.29526 -17.65743,-9.06575 -10.85,-13.48 35.6227,-19.637776 34.69936,-61.423453 7.12758,-81.035919 C 110.18826,18.209024 104.23624,11.222661 108.01033,5.3312852 110.87272,0.86306533 113.31786,1.06151 117.46,2.63 c 10.57498,4.7592492 35.07508,19.514212 34.45261,56.76 -0.37039,22.162492 -8.1082,37.551535 -18.83964,49.45716 -0.90058,0.36133 -9.08042,7.1019 -12.44297,7.87284 z';

var timeline = anime.timeline({
  autoplay: true,
  direction: "alternate",
  loop: true
});

timeline.add({
  targets: ".test",
  d: {
    value: [
      small,
      big
    ],
    duration: 1000,
    easing: "easeOutSine"
  },
  offset: 200
});

.test {
    position: fixed;top:0;
    left:0;height: 300px;width:300px;
}
div {
width:25vw;
height:auto;
}

<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js'></script> 
<div >
            <svg viewBox="0 0 153.07 118.86">
            <path  d="M75.75,8.72V110.15a8.7,8.7,0,0,1-14.83,6.18L35.13,90.74a11.26,11.26,0,0,0-8-3.27H11.29A11.29,11.29,0,0,1,0,76.18V42.68A11.28,11.28,0,0,1,11.29,31.4H27.18a11.27,11.27,0,0,0,8-3.28L60.92,2.54A8.7,8.7,0,0,1,75.75,8.72Z"/>
            
            <path  d="m 98.63,86.72 c -8.896613,0.01429 -11.168355,-12.324863 -2.85,-15.48 10.87779,-4.111221 10.87779,-19.498779 0,-23.61 C 91.637862,46.06151 89.551515,41.432137 91.120003,37.290001 92.688492,33.147866 97.317862,31.06151 101.46,32.63 c 11.10918,4.225054 18.45261,14.874508 18.45261,26.76 0,11.885492 -7.34343,22.534946 -18.45261,26.76 -0.90058,0.361333 -1.859762,0.554526 -2.83,0.57 z"/>
            <path class="test" d="m 120.63,116.72 c -13.84288,4.29526 -17.65743,-9.06575 -10.85,-13.48 35.6227,-19.637776 34.69936,-61.423453 7.12758,-81.035919 C 110.18826,18.209024 104.23624,11.222661 108.01033,5.3312852 110.87272,0.86306533 113.31786,1.06151 117.46,2.63 c 10.57498,4.7592492 35.07508,19.514212 34.45261,56.76 -0.37039,22.162492 -8.1082,37.551535 -18.83964,49.45716 -0.90058,0.36133 -9.08042,7.1019 -12.44297,7.87284 z"/>
            
            </svg>
        </div>