1

我尝试使用 snap.js 来实现我的两个 blob 形状之间的变形效果。但是，变形过渡并不像我在此处遵循的示例那么顺利。我在 illustrator 中创建了形状并将其导出为 svgs。有谁知道我可以做些什么来使形状过渡更平滑而没有所有边缘？

HTML 
<svg id="blobs" width="1000x" height="1000px" style="display:block; xmlns="http://www.w3.org/2000/svg">
<path id="blob1" style="fill:#1B418C;" d="M97,183.67c-16.88-17.07-52.33,5.65-66.76-11.5-6.89-8.19-6.29-22.28-.78-30.66,7.24-11,22.89-13.06,37.67-12.77,55.35,1.09,88.12,1.66,114.19-1.28,22.39-2.52,44.1-5.24,66.17-21.08,18.16-13,24.94-26.61,35.13-39.6,29.43-37.52,70.95-49.29,102.08-58.12C474.6-16.84,586.8,17.4,601.17,66.78c.86,3,6.27,21.55-2.34,38.33-8.14,15.85-22.78,17-37.28,29.59-26.27,22.74-31.84,58-32.67,64.38-6,46.27,31,56.52,30.13,110.42-.13,8.17-.72,45-26.93,70.9-18.42,18.22-41,22.66-49.78,24.28-37.85,6.94-66.37-8.14-180.35-46.63-16.93-5.72-36.42-12.26-48-2.56-12.8,10.71-4.64,30.63-11.13,52.38-12.47,41.79-72.44,68.26-122.13,64.31C70.42,468.17,9.16,431.32,1,372.74-4,337.25,10.09,290.55,39,269.26c25.48-18.74,49.93-17.2,60.9-41.52C105.88,214.58,107.34,194.12,97,183.67Z"/>
<path opacity ="0" id="blob2" style="fill:#e29f27;" d="M339.37,14.68C393.67,53,361,146,405.32,167.41c27.67,13.41,44.91-20.72,105.38-17.23,13.63.79,76.17,4.41,102.16,51.2,1.08,1.94,20.54,38.24,5.72,73.58-14.52,34.64-44.42,26.47-74.46,65.27-29.78,38.48-16.82,67.74-45,84.67-20.37,12.22-48.3,9.65-67.5,1.29-45.57-19.82-43.69-73-98.9-92.4a107,107,0,0,0-18.13-4.55c-47-8.28-83.64,11.63-103.88,19.68-58,23.06-150,15.75-188-31.76-28.21-35.34-31.36-99-2.6-135,40.71-50.93,115-8.36,167.53-63.36,38.77-40.57,20.83-87.08,62.27-109.38C275.43-4.3,313.67-3.44,339.37,14.68Z"/>
</svg>

JAVASCRIPT:
var svg = document.getElementById("blobs"); 
var s = Snap(svg);
var Blob1 = Snap.select('#blob1');
var Blob2 = Snap.select('#blob2');
var Blob1Points = Blob1.node.getAttribute('d');
var Blob2Points = Blob2.node.getAttribute('d');

var toBlob2 = function(){
Blob1.animate({ d: Blob2Points }, 2000, mina.getById(blob1), toBlob1);}
var toBlob1 = function(){
Blob1.animate({ d: Blob1Points }, 2000, mina.getById(blob2), toBlob2);}
toBlob1();

我的代码

任何帮助将不胜感激，谢谢。

4

0 回答 0