如何逐步绘制矢量路径？ （拉斐尔.js）

如何逐步动画化矢量路径，就像它被绘制一样？换句话说，慢慢地逐像素地显示路径。

我在用着Raphaël.js, but如果您的答案不是特定于库的，例如可能有一些通用的编程模式可以完成此类事情（我对矢量动画相当陌生），欢迎！

使用直线路径很容易做到，就像上面的例子一样简单那一页 http://irunmywebsite.com/raphael/additionalhelp.php?q=animate::

path("M114 253").animate({path: "M114 253 L 234 253"});

但尝试更改该页面上的代码，例如：

path("M114 26").animate({path: "M114 26 C 24 23 234 253 234 253"});

你会明白我的意思的。路径当然是从初始状态（点“M114 26”）到结束状态（从点“M114 26”开始的曲线“C 24 23 234 253 234 253”）进行动画处理，但不是以所讨论的方式指定的方式，而不是像它正在被绘制。

我不明白怎么办animateAlong可以做到这一点。它可以沿着路径对对象进行动画处理，但是当对象沿着路径进行动画处理时，如何使该路径逐渐显示出来呢？

解决方案？

(Via 彼得彼得的回答 https://stackoverflow.com/questions/4631019/how-to-draw-a-vector-path-progressively-raphael-js/5073832#5073832.)

看来目前最好的方法是使用原始 SVG 通过“假”破折号。解释参见这个演示 http://www.carto.net/svg/samples/animated_bustrack.shtml or 这个文件 http://pilat.free.fr/svgopen/pdf/open_workshop.pdf，第 4 页。

如何生成渐进图？

我们必须使用stroke-dasharray and stroke-dashoffset并知道要绘制的曲线的长度。 此代码在屏幕上不绘制任何圆、椭圆、折线、多边形或路径：

<[element] style="stroke-dasharray:[curve_length],[curve_length]; stroke-dashoffset:[curve_length]"/>

如果在动画元素中，Stroke-DashOffset 减小到 0，我们就会得到曲线的渐进式绘制。

<circle cx="200" cy="200" r="115"
    style="fill:none; stroke:blue; stroke-dasharray:723,723; stroke-dashoffset:723">
    <animate begin="0" attributeName="stroke-dashoffset"
        from="723" to="0" dur="5s" fill="freeze"/>
</circle>

如果您知道更好的方法，请留下答案。

Update（2012 年 4 月 26 日）：找到一个很好地说明这个想法的例子，请参阅动画贝塞尔曲线 http://www.jasondavies.com/animated-bezier/.

也许有人像我一样正在寻找答案这两天：

// Draw a path and hide it:
var root = paper.path('M0 50L30 50Q100 100 50 50').hide();
var length = root.getTotalLength();

// Setup your animation (in my case jQuery):
element.animate({ 'to': 1 }, {
    duration: 500,
    step: function(pos, fx) {
        var offset = length * fx.pos;
        var subpath = root.getSubpath(0, offset);
        paper.clear();
        paper.path(subpath);
    }
});

仅通过使用 RaphaelJS 方法，这对我来说就成功了。

这是评论中要求的 jsFiddle 示例，http://jsfiddle.net/eA8bj/ http://jsfiddle.net/eA8bj/