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

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

尤里卡！（也许 - 假设你很舒服地走出 Raphael 的友好领域进入纯 SVG 领域......）

您可以使用 SVG keyTimes和keySplines。

这是一个工作示例：

http://www.carto.net/svg/samples/animated_bustrack.shtml

...这里有一些可能有用的解释：

http://msdn.microsoft.com/en-us/library/ms533119(v=vs.85).aspx

我想提供一个替代的、仅限 Raphael+JS 的解决方案，我在自己的工作中大量使用了该解决方案。与 davidenke 的解决方案相比，它有几个优点：

1. 不会在每个循环中清除纸张，允许动画路径与其他元素很好地共存；
2. 使用 Raphael 自己的渐进动画重复使用单个路径，使动画更流畅；
3. 资源密集程度大大降低。

这是方法（可以很容易地将其重组为扩展）：

function drawpath( canvas, pathstr, duration, attr, callback )
{
    var guide_path = canvas.path( pathstr ).attr( { stroke: "none", fill: "none" } );
    var path = canvas.path( guide_path.getSubpath( 0, 1 ) ).attr( attr );
    var total_length = guide_path.getTotalLength( guide_path );
    var last_point = guide_path.getPointAtLength( 0 );
    var start_time = new Date().getTime();
    var interval_length = 50;
    var result = path;        

    var interval_id = setInterval( function()
    {
        var elapsed_time = new Date().getTime() - start_time;
        var this_length = elapsed_time / duration * total_length;
        var subpathstr = guide_path.getSubpath( 0, this_length );            
        attr.path = subpathstr;

        path.animate( attr, interval_length );
        if ( elapsed_time >= duration )
        {
            clearInterval( interval_id );
            if ( callback != undefined ) callback();
                guide_path.remove();
        }                                       
    }, interval_length );  
    return result;
}

这是我网站上的两个使用示例：一个用于Path Transformation，另一个用于Progressive Lettering。

我为此创建了一个脚本：Scribble.js，基于这个伟大的dasharray/dashoffset技术。

只需在一堆 SVG 上实例化它<path>：

var scribble = new Scribble(paths, {duration: 3000});
scribble.erase();
scribble.draw(function () {
    // done
});

——

注意：USAGE这里的完整代码：https : //gist.github.com/abernier/e082a201b0865de1a41f#file-index-html-L31

享受 ;）

使用“ pathLength ”属性，我们可以设置路径的虚拟长度。从那时起我们可以在“stroke-dasharray”中使用这个虚拟长度。因此，如果我们将“pathLength”设置为 100 个单位，那么我们可以将“stroke-dasharray”设置为“50,50”，即正好是路径的 50%、50%！

这种方法有一个问题：唯一支持此属性的浏览器是 Opera 11。

这是没有 javascript 或硬编码长度的平滑曲线绘制动画的示例。（仅在 Opera 11 中正常工作）