jsplumb 动画连接线

Posted 2023-05-08

【中文标题】jsplumb 动画连接线

【英文标题】：jsplumb animate connector lines

【发布时间】：2013-06-16 05:29:00

【问题描述】：

我使用 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 非常陌生，我似乎无法找到很多关于它的信息

谢谢

【参考方案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 可以查看工作情况。

【讨论】：

connector、paintStyle、endpointStyle、hoverPaintStyle、endpointHoverStyle 和锚点应以小写字母开头。

需要注意的是，这个答案中的代码取自jsplumb demo，没有任何归属。