拓扑图线条流动效果

图论中边是重要元素，它连接各个顶点构成拓扑图，有向图中，边具有方向性，在画布中表现为箭头，在实际应用中，边可以代表链路，链路上不只是有方向，还有流量，信号种类等信息，光用箭头表现力就不够了，可增加线条线型，以及流动效果来体现，这里介绍 Qunee 1.6 中线条流动效果的实现

虚线流动效果

虚线流动效果在 连线示例中有演示，使用虚线偏移量样式，不断增大，实现线条的流动

虚线流动代码

var offset = 0;
var index = 0;
var timer = setInterval(function(){
    offset += -1;
//    edge2.setStyle(Q.Styles.EDGE_LINE_DASH_OFFSET, offset);
    edge1.setStyle(Q.Styles.EDGE_LINE_DASH_OFFSET, offset);
    index++;
    index = index%20;
    edge2.setStyle(Q.Styles.ARROW_TO_OFFSET, -0.3 -0.02 * (20 - index));
    edge1.setStyle(Q.Styles.ARROW_FROM_OFFSET, {x: 0.3 + 0.02 * (20 - index), y: -10});
}, 150);

运行效果

定制流动效果

对于更高级的流动需求，需要定制来实现，原理是在线条上挂载一个小图标，让这个图标沿线移动，从而形成动画效果

实现代码

下面的代码实现在线条上移动小图标

var line = graph.createShapeNode("Line");
line.moveTo(-100, 0);
line.lineTo(200, 0);
line.curveTo(300, 0, 300, 100