带有动漫js的Svg变形不改变路径答案

【问题标题】：Svg morph with anime js not changing path带有动漫js的Svg变形不改变路径
【发布时间】：2020-04-23 20:57:18
【问题描述】：

我正在尝试使用动漫 js 制作一些 svg 动画，我认为它会工作得很好，因为我只需要更改 de d 属性。

我使用了一些 blob，但代码似乎无法识别它们的路径。这是我为加载svg's 而创建的一支笔 https://codepen.io/obarrier/pen/eYmyEEa

这是动画的笔 https://codepen.io/obarrier/pen/NWPXvRy

我知道我做错了什么，但无法弄清楚错误在哪里......因为路径未被识别

提前致谢！

【问题讨论】：

也许你应该尝试使用具有相同点数和相同命令的路径
我再次更改它们，使它们都有 10 分，但路径可能再次不同，我不知道为什么
他们都有10分......但是动画都搞砸了

标签： javascript css animation svg anime.js

【解决方案1】：

我发现了一些问题。首先，您在第二个代码笔中的 .blobPath 之后有一个空格。

targets: '.blobPath ',

其次，你的路径真的一团糟。您在第一个值之后提供的 3 个值是视图框外的 waaaayyyyyy。另外，看起来您在主路径上有轮换，但在其他路径上没有。

我发现如果您为动画创建一个文件。您可以只复制一条路径，然后重新设计新路径。对要设置动画的每条路径执行此操作。这样你就可以确定这些点是正确的。

然后您只需导出 SVG 并在您喜欢的文本编辑器中打开它，然后将“d”值复制到您的代码中。

d="M265.42,72.182l0,-72.182l-265.42,0l0,82.817c0,0 12.811,13.647 32.105,14.751c19.294,1.104 57.317,-11.093 57.317,-11.093l43.249,-13.139c0,0 20.977,-7.784 40.873,-7.784c19.897,0 38.711,7.784 38.711,7.784c0,0 27.756,11.399 41.335,7.557c13.579,-3.842 11.83,-8.711 11.83,-8.711Z"

我重新设计了你的代码笔，我认为它正在做你想做的事。我没有花很多时间在路径上工作。我将把它留给你。

https://codepen.io/cjboco/pen/zYGMmKm

【讨论】：

我正在检查笔，将在路径上工作，谢谢！
我在进行转换时遇到了很多麻烦，因为 svg 在两者上的点数不同。