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

animation运动效果图

官方示例

<style type="text/css">
    .flow {
        stroke-dasharray: 8;
        animation: dash 0.5s linear;
        animation-iteration-count: infinite;
    }
    @keyframes dash {
        to {
        stroke-dashoffset: -16;
        }
    }
</style>

<!-- Example code -->
<script type="text/javascript">
    function main(container)
    {
        var graph = new mxGraph(container);
        graph.setEnabled(false);
        var parent = graph.getDefaultParent();

        var vertexStyle = 'shape=cylinder;strokeWidth=2;fillColor=#ffffff;strokeColor=black;' +
            'gradientColor=#a0a0a0;fontColor=black;fontStyle=1;spacingTop=14;';
        
        graph.getModel().beginUpdate();
        try
        {
            var v1 = graph.insertVertex(parent, null, 'Pump', 20, 20, 60, 60,vertexStyle);
            var v2 = graph.insertVertex(parent, null, 'Tank', 200, 150, 60, 60,vertexStyle);
            var e1 = graph.insertEdge(parent, null, '', v1, v2,
                'strokeWidth=3;endArrow=block;endSize=2;endFill=1;strokeColor=black;rounded=1;');
            e1.geometry.points = [new mxPoint(230, 50)];
            graph.orderCells(true, [e1]);
        }
        finally
        {
            // Updates the display
            graph.getModel().endUpdate();
        }

        // Adds animation to edge shape and makes "pipe" visible
        var state = graph.view.getState(e1);
        state.shape.node.getElementsByTagName('path')[0].removeAttribute('visibility');
        state.shape.node.getElementsByTagName('path')[0].setAttribute('stroke-width', '6');
        state.shape.node.getElementsByTagName('path')[0].setAttribute('stroke', 'lightGray');
        state.shape.node.getElementsByTagName('path')[1].setAttribute('class', 'flow');
    };
</script>

实现原理

• 获取连线

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

<style type="text/css">
    .flow {
        stroke-dasharray: 8;
        animation: dash 0.5s linear;
        animation-iteration-count: infinite;
    }
    
    @keyframes dash {
        to {
            stroke-dashoffset: -16;
        }
    }
</style>

• 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