如何使用Raphael JS实现矢量路径绘制动画？

Question

我该如何使用Raphael JS绘制一个矢量路径动画？

我有一组坐标，想要用Raphael JS将它们连接起来。

这些坐标在网格上是（x，y集）。我想要从一端开始，并在用户观看时“连接点”。最终效果应类似于以下内容： Picture 9.png http://img213.imageshack.us/img213/8013/picture9my.png 理想情况下，我希望能够使路径弯曲，使其看起来更像以下内容（仅供参考）： Picture 10.png http://img534.imageshack.us/img534/1789/picture10fc.png 这些坐标是：

26,-6
14,-12
5,-20
11,-28
14,-37
5,-40

我一直在谷歌上搜索，并阅读了这个问题：如何逐步绘制矢量路径？（Raphael.js），但我想要使用特定的Raphael.js，那个页面上关于Raphael.js的示例似乎不起作用，也没有提及使用多个坐标点作为输入。

- Steve Brown

Answer 1

渐进路径

逐步绘制路径很容易实现。我不喜欢在这个问题上被接受第二多的答案，因为它在每一步重新创建路径，清除纸张间隔。以下是我一次又一次使用的实用函数：

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;
}

您可以在我的网站上看到它的实际应用。

这个操作将使得线性方式下点的渐进路径构造动画变得非常简单。您只需编译路径即可...

var sequence_path = ["M26,-6", "L14,-12", "L5,-20", "L11,-28", "L14,-37", "L5,-40"];

然后将其传递给您设置的任何路径动画函数。 在我的情况下，

drawpath( paper, 
          sequence_path, 
          3500, 
          { stroke: 'black', 'stroke-width': 2, 'stroke-opacity': 1, fill: 'none', 'fill-opacity': 0 }, 
          function()
          {
              alert("All done");    // trigger whatever you want here
          } );

曲线插值

Raphael 2.0的Catmull Rom功能使得在点之间优雅地绘制曲线变得非常简单（感谢Erik Dahlström指出这一点）。您所需要做的就是使用“R”命令构建路径以在点之间移动，Raphael将完成其余部分。

function generateInterpolatedPath( points )
{
    var path_sequence = [];
    path_sequence.push( "M", points[0].x, points[0].y );
    path_sequence.push( "R" );
    for ( var i = 1; i < points.length; i++ )
    {
        path_sequence.push( points[i].x, points[i].y );
    }
    return path_sequence;
}

您可以在这里看到所有的代码片段协同工作。

- Kevin Nielsen

---

@KevinNielsen，我一直在使用这个，但是我刚刚注意到它在Firefox中运行得比预期快。我有一个4点路径，如果我将其设置为2秒（或更长时间），它需要的时间比那还要少。 - Jayen

@Jayen -- 你可以给我指一下你的代码吗？这个周末我很愿意看一看。 - Kevin Nielsen

Answer 2

你还可以使用Catmull Rom（参见http://raphaeljs.com/reference.html#Paper.path）来获取通过给定点的平滑曲线。

现场演示在这里（单击以分配点，然后按住Shift键单击以转换为Catmull Rom曲线）。

- Erik Dahlström

---

谢谢，@Erik。我之前没看到Catmull-Rom样条技术已经内置在2.0中了——这真的很棒。希望你不介意我把它加入到我的答案中。 - Kevin Nielsen