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);

此外，还有一个代码链接HERE可供使用。

jsplumb动画连接线

1 个答案: