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 的 body 部分的内容是这样的

<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 可以查看工作情况。