使用Animejs变形后SVG路径不同



我试图用animation .js把一个clip-path从一个形状变成另一个形状。这些形状有相同数目的点

我遇到了一些问题,路径没有正确显示。在进一步的检查,我发现,当我试图用动画pathd属性使用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

相关内容

  • 没有找到相关文章

最新更新