为jsplumb行设置动画

Question

有没有办法在jsplumb连接线被绘制时使它们具有动画效果？我想要一个动画，而不是仅仅出现一条线。

我调用jsPlumb.connect在单击div时绘制线条，如下所示

$("#manchester").on('click', function() {
    jsPlumb.connect({source: "manchester", target: "paris"});
});

Answer 1

首先，我们需要在建立连接时绑定一个事件，以便对新创建的连接进行动画处理：

jsPlumb.bind("jsPlumbConnection", function(ci) {

            new animateConn(ci.connection); //call the animate function for the newly created function              
}

现在，在动画函数中，只需更新连接覆盖的位置即可获得动画。在执行此操作之前，请确保将overlay添加到连接：

jsPlumb.connect({
source: "manchester", target: "paris",
overlays:[ 
    "Arrow", 
    [ "Label", { location:0.45, id:"arrow" } ]
]
});

现在是animateConn函数：

        var interval = null; 
        animateConn = function(conn) {
            var arrow = conn.getOverlay("arrow");
            interval = window.setInterval(function() {
                arrow.loc += 0.05;
                if (arrow.loc > 1) {arrow.loc = 0;}
                try{
                    conn.repaint(); // writing in try block since when connection is removed we need to terminate the function for that particular connection
                }catch(e){stop();}
            }, 100);                 
        },
        stop = function() {
            window.clearInterval(interval);
        };

要自定义覆盖，请参考API DOC。