我试图用animation .js把一个clip-path从一个形状变成另一个形状。这些形状有相同数目的点
我遇到了一些问题，路径没有正确显示。在进一步的检查，我发现，当我试图用动画path的d属性使用animation .js，在DOM的结果将不同于我传递在animation .js动画函数。
我建立了一个简单的代码依赖来显示这个问题。
最初，使用id为path的路径剪切图像，其d属性等于:
M-82.511-84.642a.483.483,0,0,1,.174.226.45.45,0,0,1-.061.259.677.677,0,0,1-.14.222.467.467,0,0,1-.251.112.572.572,0,0,1-.314-.041.377.377,0,0,1-.224-.226.617.617,0,0,1,.072-.326.8.8,0,0,1,.158-.3.366.366,0,0,1,.305-.1A.621.621,0,0,1-82.511-84.642Z
然后，当您点击按钮时，anime函数在路径上运行，并试图将其更改为相同的值。
动画函数如下:
anime({
targets: 'svg path',
duration: 500,
easing: 'linear',
d: 'M-82.511-84.642a.483.483,0,0,1,.174.226.45.45,0,0,1-.061.259.677.677,0,0,1-.14.222.467.467,0,0,1-.251.112.572.572,0,0,1-.314-.041.377.377,0,0,1-.224-.226.617.617,0,0,1,.072-.326.8.8,0,0,1,.158-.3.366.366,0,0,1,.305-.1A.621.621,0,0,1-82.511-84.642Z'
})
我也尝试了以下方法，因为它更接近于在animation .js文档中显示的代码:
anime({
targets: 'svg path',
duration: 500,
easing: 'linear',
d: [{ value: "M-82.511-84.642a.483.483,0,0,1,.174.226.45.45,0,0,1-.061.259.677.677,0,0,1-.14.222.467.467,0,0,1-.251.112.572.572,0,0,1-.314-.041.377.377,0,0,1-.224-.226.617.617,0,0,1,.072-.326.8.8,0,0,1,.158-.3.366.366,0,0,1,.305-.1A.621.621,0,0,1-82.511-84.642Z"}]
})
然而，正如您从视觉上看到的，svg远没有达到原来的效果。检查路径显示，动画前后应该相同的d属性不再相同。现在是:
M-82.511 -84.642a0,0,1,0,0,1 0,0,1 0,0,1 0,0,1 -0.314 0.377,0,0,1 -0.224 0.617,0,0,1,0.072 0.8,0,0,1,0.158 0.366,0,0,1,0.305 -0.1A0,0,1 -82.511 -84.642Z.
正如我所说的，这是我试图做的事情的简化版本。animation .js文档没有明确提到能够动画d属性，但看到它实际上改变了路径，我想这应该是可行的。
显然，animation .js有一个解析高度最小化路径数据的错误字符串。
解析regex应该改进以处理诸如 之类的连接浮点值。a.483.483,0,0,1,.174.226.45.45,0,0,1-.061.259
翻译
a .483 .483 0 0 1 .174 .226
.45 .45 0 0 1 -.061 .259
但是被解析为a0,0,1,0,0,1 0,0,1 0,0,1 0,0,1
处理:"deminify"您的路径数据，例如使用SVG路径编辑器
粘贴d字符串并点击缩小复选框两次。
结果:
M -82.511 -84.642 a 0.483 0.483 0 0 1 0.174 0.226 a 0.45 0.45 0 0 1 -0.061 0.259 a 0.677 0.677 0 0 1 -0.14 0.222 a 0.467 0.467 0 0 1 -0.251 0.112 a 0.572 0.572 0 0 1 -0.314 -0.041 a 0.377 0.377 0 0 1 -0.224 -0.226 a 0.617 0.617 0 0 1 0.072 -0.326 a 0.8 0.8 0 0 1 0.158 -0.3 a 0.366 0.366 0 0 1 0.305 -0.1 A 0.621 0.621 0 0 1 -82.511 -84.642 Z