javascript - 如何逐步绘制矢量路径？ (拉斐尔.js)

Question

如何像逐渐绘制一样为矢量路径设置动画？换句话说，逐像素缓慢显示路径。

我正在使用 Raphaël.js，但是如果您的答案不是特定于库的——比如可能有一些通用的编程模式来做那种事情(我'我是矢量动画的新手)——欢迎使用!

---

使用直线路径很容易，就像 that page 上的示例一样简单::

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”)到结束状态(曲线“C 24 23 234 253 234 253”从点“M114 26”开始)动画，但不是以有问题的方式指定，不像正在绘制。

我不明白 animateAlong 如何做到这一点。它可以使对象沿着一条路径设置动画，但是我怎样才能使这条路径在对象沿着它设置动画时逐渐显示出来呢？

---

解决方案？

(通过 peteorpeter's answer .)

似乎目前最好的方法是通过使用原始 SVG 的“假”破折号。有关说明，请参阅 this demo或 this document , 第 4 页。

How produce progressive drawing?

We have to use stroke-dasharray and stroke-dashoffset and know length of curve to draw. This code draw nothing on screen for circle, ellipse, polyline, polygone or path:

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

If in animate element stroke-dashoffset decrease to 0, we get progressive drawing of curve.

<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 日):找到一个很好地说明这个想法的例子，参见 Animated Bézier Curves .

Answer 1

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

// 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/