使用 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>

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

morphing with anime.js: coordinates jump somewhere else in between given start and end position

javascript

css

svg

anime.js