Javascript 如何为使用Raphael JS绘制的向量路径设置动画？

如何为使用Raphael JS绘制的向量路径设置动画

我想用Raphael JS连接一组坐标

在栅格上，坐标是（x，y集）。我想从一端开始，在用户观看时“连接点”。最终产品的外观如下所示：

理想情况下，我希望能够使路径弯曲，使它们看起来更像这样（添加坐标以供参考）：

坐标为：

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

---

我一直在搜索谷歌，我已经通读了这个问题，但我正在尝试专门使用Raphael.js，该页面上的Raphael.js示例似乎不起作用，也没有提到使用多个坐标点进行输入。

渐进路径

逐步绘制路径很容易。我不喜欢第二个最被接受的答案，因为它在每一步都会重新创建一条路径，清除中间的纸张。下面是我多次使用的实用函数：

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

函数生成器InterpolatedPath（点）
{
变量路径_序列=[]；
路径_序列。推送（“M”，点[0]。x，点[0]。y）；
路径_序列推送（“R”）；
对于（变量i=1；i

---

你可以看到所有的部件一起工作

您还可以使用Catmull Rom（请参阅）获得通过给定点的平滑曲线

---

现场演示（单击以分配点，然后按住shift键并单击以过渡到Catmull Rom曲线）。

谢谢，@Erik。我还没见过Catmull Rom样条线技术被内置到2.0中——这真是太巧妙了。我希望你能原谅我把它合并到我自己的答案中。@KevinNielsen，我一直在使用它，但我刚刚注意到它在Firefox中的运行速度比预期的要快。我得到了一个4点的路径，如果我将它设置为2秒（或更多），它所花费的时间比这个要少。@Jayen--你能给我指出你的代码吗？这个周末我很乐意看一看。