使用anime.js进行变形：坐标在给定的开始和结束位置之间跳转到其他位置

Question

我有两个svg三角形，我试图用anime.js对其进行变形。我的问题是在给定的起点和终点坐标之间，图形完全跳到了其他位置，我不知道为什么。

这是开始位置：

这是结束位置：

这是不知道原因的坐标跳转到的位置：

这是我的示例代码。您可以通过单击按钮启动它。

https://codepen.io/saitam1/pen/draKLb

Answer 1

问题出在你的路径上。

为使动画不残酷地改变三角形的位置，当您的第一个路径使用绝对坐标m时，路径必须使用相对坐标M。

从m更改为M可以解决三角形跳跃问题，但是您必须找到另一条路径才能实际到达所需的最终位置。

function doFunction() {

  var paths = [
    // here changed M to m
    {id: '#path309', d: 'm 55.184523,127.42857 34.962798,139.6183 43.46726,120.24702 Z'}, 
    {id: '#path311', d: 'm 54.389347,121.02185 -10.922087,-0.77483 11.717263,7.18155 z'}
  ];

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

  paths.forEach(function(path, index) {
    timeline
      .add({
        targets: path.id,
        d: {
          value: path.d,
          duration: 1000,
          easing: 'easeInOutQuad'
        },
        offset: 1000 + 10 * index
      });
  });

}

svg {
  display: block;
  margin: 0 auto;
}

path {
  fill: none;
  stroke: black;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<input id="clickMe" type="button" value="clickme" onclick="doFunction();" />  

<svg xmlns="http://www.w3.org/2000/svg" width="100mm" height="100mm" viewBox="0 0 200 200">
      
  <path d="m 110.51595,80.797791 26.28083,12.271789 2.96257,10.935445 z" id="path309" />
  <path d="m 70.51595,80.797791 -5.00762,25.058566 11.28845,-2.786777 z" id="path311" />
      
</svg>