動畫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    
} 

現在在動畫函數中，只需更新連接疊加層的位置即可獲取動畫。在做之前，請確保您添加覆蓋到你的連接：

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。