动画jsplumb行

Question

有没有办法在绘制时为jsplumb连接线设置动画？我想要一个动画，而不只是一条线出现。

我点击一个div来调用jsPlumb.connect来画线，就像这个

一样

$("#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              
}

现在在动画功能中只需更新连接叠加的位置即可获得动画。在此之前，请确保为您的连接添加叠加层：

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。