如何为封闭的 svg 路径创建动画

Question

我正在尝试创建用动画填充封闭路径的动画。

这是我创建封闭路径的 svg：

<path fill="#000000" stroke="none" d="M238.281,174.573C248.449,182.844,238.12900000000002,206.155,231.52,212.05700000000002C200.11100000000002,240.12900000000002,134.22500000000002,267.20000000000005,108.39800000000001,227.258C93.47600000000001,204.17600000000002,101.91600000000001,168.55100000000002,114.97200000000001,146.37900000000002C116.486,143.92800000000003,118.766,145.484,117.98500000000001,147.34000000000003C98.50600000000001,185.34800000000004,111.37400000000001,227.41400000000004,159.306,221.95900000000003C181.185,219.30900000000003,209.638,208.14600000000004,227.34500000000003,195.38700000000003C229.59600000000003,193.76600000000002,232.37400000000002,191.73100000000002,233.86100000000002,190.31900000000002C221.52700000000002,185.90500000000003,190.156,189.51800000000003,184.19600000000003,173.717C181.19100000000003,165.74800000000002,187.25300000000001,149.83,191.19300000000004,141.62300000000002C204.02500000000003,114.91400000000002,232.57500000000005,89.94700000000002,246.48100000000005,109.65000000000002C249.32800000000006,113.77500000000002,251.90800000000004,135.63600000000002,245.71600000000007,135.63600000000002C242.66200000000006,131.55800000000002,239.34900000000007,124.93700000000003,233.48900000000006,124.93700000000003C218.73600000000005,125.04100000000003,197.39800000000005,138.88800000000003,194.57300000000006,151.45700000000002H194.58900000000006C193.58000000000007,155.217,196.46800000000005,160.871,199.48800000000006,163.04300000000003C209.489,170.251,229.978,167.669,238.281,174.573Z" stroke-width="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);fill: #fff;stroke: #000;" data-svg="path"></path>

这是我的路径代码的jsfiddle link。

现在我想用动画填充闭合路径，看起来像是从一个终点开始并在路径的另一点结束的渐进式填充。 我们尝试使用 raphaeljs，但任何其他 js 库也可以。

感谢任何帮助。

Answer 1

正如罗伯特所说，线性渐变可能是一种方式。我只是要展示另一种可能是替代方法的方法。您可以通过使路径从所需的绘图开始点开始来改善效果。

您的示例与典型路径进展的问题之一是您的形状宽度可变，因此您无法执行一些常见的技巧（如 animatedasharray/offset）。其他一些方法也可能效果不佳，因为填充没有方向。线性渐变可能会有所帮助，但仍然可能存在问题。

另一种方法是制作剪辑或蒙版并为其设置动画。

在这个使用 Snap 的例子中，我们创建一个完全相同的克隆元素的蒙版，找到长度，使笔画真正变胖（所以多余的边框被蒙版包含），然后动画 stroke-dashoffset 以缓慢绘制行。

可以通过只使用一条路径来改进它，该路径是所需的单笔画（而不是完全闭合的形状），并且还具有路径的起点，与所需的动画开始相同。

var myPath = Snap('#myPath');

var myPathClone = myPath.clone().attr({ id:  'myPathClone' });

myPath.attr({ mask: myPathClone, fill: 'red' });

var myPathLength = myPathClone.getTotalLength();

myPathClone.attr({ fill: 'none', stroke: 'white', strokeWidth: 80, strokeDasharray: myPathLength + ' ' + myPathLength, strokeDashoffset: myPathLength, "stroke-linecap": 'round' });


myPathClone.animate({ strokeDashoffset: 0 }, 2000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<svg id="mySvg" height="600" version="1.1" width="800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: absolute; left: 10px; top: 10px;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.4</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs><path id="myPath" fill="#ff0000" stroke="none" d="M238.281,174.573C248.449,182.844,238.12900000000002,206.155,231.52,212.05700000000002C200.11100000000002,240.12900000000002,134.22500000000002,267.20000000000005,108.39800000000001,227.258C93.47600000000001,204.17600000000002,101.91600000000001,168.55100000000002,114.97200000000001,146.37900000000002C116.486,143.92800000000003,118.766,145.484,117.98500000000001,147.34000000000003C98.50600000000001,185.34800000000004,111.37400000000001,227.41400000000004,159.306,221.95900000000003C181.185,219.30900000000003,209.638,208.14600000000004,227.34500000000003,195.38700000000003C229.59600000000003,193.76600000000002,232.37400000000002,191.73100000000002,233.86100000000002,190.31900000000002C221.52700000000002,185.90500000000003,190.156,189.51800000000003,184.19600000000003,173.717C181.19100000000003,165.74800000000002,187.25300000000001,149.83,191.19300000000004,141.62300000000002C204.02500000000003,114.91400000000002,232.57500000000005,89.94700000000002,246.48100000000005,109.65000000000002C249.32800000000006,113.77500000000002,251.90800000000004,135.63600000000002,245.71600000000007,135.63600000000002C242.66200000000006,131.55800000000002,239.34900000000007,124.93700000000003,233.48900000000006,124.93700000000003C218.73600000000005,125.04100000000003,197.39800000000005,138.88800000000003,194.57300000000006,151.45700000000002H194.58900000000006C193.58000000000007,155.217,196.46800000000005,160.871,199.48800000000006,163.04300000000003C209.489,170.251,229.978,167.669,238.281,174.573Z" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0);" data-svg="path"></path><image x="0" y="0" width="0" height="0" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="about:blank" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></image><image x="0" y="0" width="0" height="0" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="Raphaël’s object" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></image></svg>