gojs-设置流动的连接线

gojs,是一款前端展示拓扑图的插件，它遵循自己的语法，因为他的功能丰富，官网上也可以看到许多例子，珊妹觉得不是一款很容易上手的前端插件，需要一点点挖掘它的功能，但每次发现它的新功能，对它的认可度都会+1.

今天我们来设置他的流动的连接线：（珊妹这里提供两个方法，因为学习过程中发现破解版的go.js里不支持Animation的方法）

方法一：

珊妹是拿官网里最简单的例子来学习的，因为多余的代码少，更能清楚的知道每段代码的意义；

1.首先在myDiagram.linkTemplate的设置里添加代码：

$(go.Shape, { isPanelMain: true, stroke: "lightgreen", strokeWidth: 1 }),

$(go.Shape, { isPanelMain: true, stroke: "lightblue", strokeWidth: 5, name: "PIPE", strokeDashArray: [5, 70] }),

如图：

我来给大家解释一下，流动的连接线需要设置两个颜色来看它流动的状态，如果普通的一根一个颜色的线是看不出来的，PIPE就是设置流动的管道， strokeDashArray的两个参数含义分别是：5像素长度，间距为70像素。效果如图：

  

2.在init方法的最后添加代码：

      var animation = new go.Animation();

      animation.easing = go.Animation.EaseLinear;

      myDiagram.links.each(function(link) {

        animation.add(link.findObject("PIPE"), "strokeDashOffset", 70, 0)

      });

      animation.runCount = Infinity;

      animation.start(); 

如图：

这里面 strokeDashOffset的两个参数的含义分别是：偏移量，相对于绘制的起点偏移的量，偏移量是一个区间的值，无论参数值多大，偏移量不会大于线段总长度，

珊妹在测试期间发现，有时流动的不流畅，分析原因可能是偏移量设置的不合适，所以这里大家根据自身可以调节一下偏移量。

方法二：

myDiagram.linkTemplate里的设置不变，但是我们不用Animation类了，这里定义一个loop( )方法，代码如下：

var opacity = 1;

var down = true;

    function loop() {

      var diagram = myDiagram;

      setTimeout(function() {

        var oldskips = diagram.skipsUndoManager;

        diagram.skipsUndoManager = true;

        diagram.links.each(function(link) {

          var shape = link.findObject("PIPE");

          var off = shape.strokeDashOffset - 3;

          // 设置（移动）笔划划动画

          shape.strokeDashOffset = (off <= 0) ? 60 : off;

          // 动画（频闪）不透明度：

          if (down) opacity = opacity - 0.01;

          else opacity = opacity + 0.003;

          if (opacity <= 0) { down = !down; opacity = 0; }

          if (opacity > 1) { down = !down; opacity = 1; }

          shape.opacity = opacity;

        });

        diagram.skipsUndoManager = oldskips;

        loop();

      }, 60);

    }

记住！！！，同样在init( )方法里调用loop( )方法，loop( )这个方法里对流动的透明度也有设置，如果大家用不到可以去掉。

好啦~~~今天的分享就到这里，关注博主不迷路，精彩内容下次继续。。。。