jsplumb動畫連接線

Question

我創建了一個非常簡單的jsplumb設置，它顯示一個頂層元素，然後將該元素連接到屏幕上的其他六個元素。

我想知道是否可以對連接線進行動畫處理，以使它們看起來像從頂部元素增長而不是僅僅出現。

這裏是我已經複製的代碼來創建簡單的佈局。

jsPlumb.ready(function() { 
    jsPlumb.importDefaults({ 
      // notice the 'curviness' argument to this Bezier curve. the curves on this page are far smoother 
      // than the curves on the first demo, which use the default curviness value.    
      Connector : [ "Bezier", { curviness:50 } ], 
      PaintStyle : { strokeStyle:"#000000", lineWidth:6 }, 
      EndpointStyle : { radius:1, fillStyle:"#000000" }, 
      HoverPaintStyle : {strokeStyle:"#ec9f2e" }, 
      EndpointHoverStyle : {fillStyle:"#ec9f2e" },    
      Anchors : [ "BottomCenter", "TopCenter" ] 
     }); 

     jsPlumb.connect({source:"starterPoint", target:"window1"}); 
     jsPlumb.connect({source:"starterPoint", target:"window2"}); 
     jsPlumb.connect({source:"starterPoint", target:"window3"}); 
     jsPlumb.connect({source:"starterPoint", target:"window4"}); 
     jsPlumb.connect({source:"starterPoint", target:"window5"}); 
     jsPlumb.connect({source:"starterPoint", target:"window6"}); 


}); 

我已經使用了CSS如下：

body 
{ 
    width: 960px; 
    margin: 0 auto; 
} 

#starterPoint 
{ 
    width: 8px; 
    height: 8px; 
    margin: 0 auto; 
    background-color:#000; 
} 

#window1, #window2, #window3, #window4, #window5, #window6 
{ 
    width: 100px; 
    height: 50px; 
    float: left; 
    margin-left: 50px; 
    margin-top: 70px; 
    background-color:#036; 
} 

而且我的HTML的主體部分的內容是這樣的

<div id="starterPoint">&nbsp;</div> 
<div id="window1">&nbsp;</div> 
<div id="window2">&nbsp;</div> 
<div id="window3">&nbsp;</div> 
<div id="window4">&nbsp;</div> 
<div id="window5">&nbsp;</div> 
<div id="window6">&nbsp;</div> 

我希望連接器「成長「從starterPoint到下面的每個窗口元素。

我很新的使用jsplumb我似乎無法找到很多資料在那裏它

感謝

Answer 1

讓我們把新的演示，

HTML端：

<div id="main"> 
      <div class="component window" id="window1"><strong>Window 1</strong></div> 
      <div class="component window" id="window2"><strong>Window 2</strong></div> 
</div> 

CSS方面：

/** ELEMENT POSITIONS **/ 
#window1 { top:5em;left:4em;} 
#window2 { top:5em; left:49em;} 
/** OPEN SANS FONT **/ 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 400; 
    src:local('Open Sans'), 
     local('OpenSans'), 
     url("OpenSans-Regular.ttf") format('truetype'), 
     url("OpenSans.woff") format('woff');   
} 


body { 
    padding:0; 
    margin:0; 
    background-color:white;  
    font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;  
    background-color:#eaedef; 

} 


.component { 
    border:1px solid #346789; 
    border-radius:0.5em;   
    opacity:0.8; 
    filter:alpha(opacity=80); 
    background-color:white; 
    color:black; 
    padding:0.5em; 
    font-size:0.8em; 
} 

.component:hover { 
    border:1px solid #123456; 
    box-shadow: 2px 2px 19px #444; 
    -o-box-shadow: 2px 2px 19px #444; 
    -webkit-box-shadow: 2px 2px 19px #444; 
    -moz-box-shadow: 2px 2px 19px #fff; 
    opacity:0.9; 
    filter:alpha(opacity=90); 
} 

.window { 
    background-color:white; 
    border:1px solid #346789; 
    box-shadow: 2px 2px 19px #e0e0e0; 
    -o-box-shadow: 2px 2px 19px #e0e0e0; 
    -webkit-box-shadow: 2px 2px 19px #e0e0e0; 
    -moz-box-shadow: 2px 2px 19px #e0e0e0; 
    -moz-border-radius:0.5em; 
    border-radius:0.5em;   
    width:5em; height:5em;   
    position:absolute;  
    color:black; 
    padding:0.5em; 
    width:8em; 
    height:8em; 
    line-height: 8em; 
    font-size:0.8em; 
    -webkit-transition: -webkit-box-shadow 0.15s ease-in; 
    -moz-transition: -moz-box-shadow 0.15s ease-in; 
    -o-transition: -o-box-shadow 0.15s ease-in; 
    transition: box-shadow 0.15s ease-in; 
} 

.window:hover { 
    border:1px solid #123456; 
    box-shadow: 2px 2px 19px #444; 
    -o-box-shadow: 2px 2px 19px #444; 
    -webkit-box-shadow: 2px 2px 19px #444; 
    -moz-box-shadow: 2px 2px 19px #fff; 
    opacity:0.9; 
    filter:alpha(opacity=90); 
} 

和jQuery的一面：

jsPlumb.bind("ready", function() { 
    jsPlumb.importDefaults({ 
      // notice the 'curviness' argument to this Bezier curve. the curves on this page are far smoother 
      // than the curves on the first demo, which use the default curviness value.    
      Connector : [ "Bezier", { curviness:50 } ], 
      PaintStyle : { strokeStyle:"#000000", lineWidth:6 }, 
      EndpointStyle : { radius:1, fillStyle:"#000000" }, 
      HoverPaintStyle : {strokeStyle:"#ec9f2e" }, 
      EndpointHoverStyle : {fillStyle:"#ec9f2e" },    
      Anchors : [ "BottomCenter", "TopCenter" ] 
     }); 

     jsPlumb.connect({source:"window1", target:"window2"}); 

     jsPlumb.bind("click", function(c) { 
       var p = $(c.canvas).find("path"), 
        l = p[0].getTotalLength(), 
        i = l, d = -10, s = 10, 
        att = function(a, v) { 
         for (var i = 0; i < p.length; i++) 
          p[i].setAttribute(a, v); 
        }, 
        tick = function() { 
         if (i > 0) { 
          i += d; 
          att("stroke-dashoffset", i); 
          window.setTimeout(tick, s); 
         } 
        }; 
       att("stroke-dasharray", l + " " + l); 
       tick(); 

      }); 

}); 

關鍵的一點是jsPlumb.bind("click", function(c) { }) ;。鼠標點擊路徑時會觸發此功能。它改變TotalLength與p[i].setAttribute(a, v);

此外，有一個codepen鏈接HERE看到工作。