mxgraph示例解析(二) animation动画实现

animation运动效果图

官方示例

实现原理

• 获取连线

var state = graph.view.getState(e1);

• 添加动画

state.shape.node.getElementsByTagName('path')[1].setAttribute('class', 'flow');

• 动画实现

.flow {
    stroke-dasharray: 8;
    animation: dash 0.5s linear;
    animation-iteration-count: infinite;
}
@keyframes dash {
    to {
    stroke-dashoffset: -16;
    }
}

简化示例

• css

• js

var graph = new mxGraph(container);
graph.setEnabled(false); //设置不可编辑
var parent = graph.getDefaultParent();

graph.getModel().beginUpdate();
try {
    var v1 = graph.insertVertex(parent, null, "Pump", 20, 20, 60, 60);
    var v2 = graph.insertVertex(parent, null, "Tank", 200, 150, 60, 60);
    var e1 = graph.insertEdge(parent, null, "", v1, v2);
    e1.geometry.points = [new mxPoint(230, 50)];
} finally {
    graph.getModel().endUpdate();
}

var state = graph.view.getState(e1);
state.shape.node.getElementsByTagName("path")[1].setAttribute("class", "flow"); //设置动画css