如何逐步绘制矢量路径？（Raphael.js）

如何实现矢量路径的逐步绘制动画效果？换句话说，就是逐像素缓慢显示路径。

我正在使用Raphaël.js，但是如果您的答案不特定于某个库——比如可能有一些通用的编程模式来完成这种事情（我对矢量动画还比较新）——那么它也是可以接受的！

对于直线路径，这很容易实现，例如在该页面的示例中所示：

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怎么做到这一点。它可以沿着路径动画一个对象，但我怎样才能使这条路径在对象沿着它移动时逐渐显示出来呢？

解决方案？

（通过peteorpeter的答案获得。）

目前似乎最好的方法是使用原始SVG中的“虚假”破折号来实现。有关说明，请参见此演示文稿或此文档，第4页。

 

如何进行渐进式绘图？

   

我们必须使用stroke-dasharray和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>

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

---

更新（2012年4月26日）：发现一个很好地说明这个想法的例子，请参见动画贝塞尔曲线。