如何将svg转化为另一个正确的svg与animation .js?

Question

我有一个问题，我的两个svg有相同数量的点，但是有些事情是不对的，当我播放动画，两个svg是如此接近在一起，但动画只是跳出来，它是不对的，一个奇怪的形状发生之前，第一个svg改变到第二个。

我在Adobe XD中做svg。下面是代码:

<svg id="morph" viewBox="0 0 1920 540">
<path class="morph" d="m864.216 135.95 36.39 41.917S780.519 307.11 1078.914 373.479s221.979-87.327 221.979-87.327l32.75-34.931s25.473 101.3 207.422 34.931 440.314 150.2 411.2 380.744S34.528 576.079 34.528 576.079s-3.64-429.647 342.063-509.987 272.923 174.653 487.623 69.861"/>
</svg>
<script>
var overlay = document.getElementById('morph');
var morphing = anime({
targets: '.morph',
d: [
{value : "m864.216 135.95 36.39 41.917S780.519 307.11 1078.914 373.479s221.979-87.327 221.979-87.327l32.75-34.931s25.473 101.3 207.422 34.931 440.314 150.2 411.2 380.744S34.528 576.079 34.528 576.079s-3.64-429.647 342.063-509.987 272.923 174.653 487.623 69.861"},
{value: "M2.49 576.483S20.535 398.736 122.472 239.61s236.674-199.127 302-217.883c176.407-41.244 334 45.685 334 45.685l340 233.7s172 105.427 280 119.484 322 12.3 322 12.3 118 5.271 160 61.5 56 89.613 62 117.727S2.49 576.483 2.49 576.483Z"},
],
duration: 1200,
loop: false,
easing: 'easeInOutQuint'
})
</script>

Answer 1

你的路径仍然需要一些优化来完全兼容插值。

大多数动画库都试图使路径在某种程度上兼容(例如，像在flubber.js中那样将它们转换为多边形)。

但通常你会得到最好的结果手动清理路径。

<表类> 步骤1 步骤2 tbody><<tr>864.216 - 135.95 m2.49 - 576.483 ml 36.39 41.917S 20.535 398.736 122.472 239.61S 780.519 307.11 1078.914 373.479S 236.674 -199.127 302-217.883s 221.979 -87.327 221.979 -87.327c 176.407 -41.244 334 45.685 334 45.68532.75 - -34.931 ll 340 233.7s 25.473 101.3 207.422 34.931s 172 105.427 280 119.484s 4400.314 150.2 411.2 380.744s 322 12.3 322 12.3S 34.528 576.079S 118 5.271 160 61.5s -3.64 -429.647 342.063-509.987s 56 89.613 62 117.727s 272.923 174.653 487.623 69.861s 2.49 576.483 2.49 576.483Z