mxGraph添加流动的管道动画

最新推荐文章于 2025-05-24 22:09:55 发布

codeXml

最新推荐文章于 2025-05-24 22:09:55 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： mxGraph 文章标签：前端 mxgraph

本文链接：https://blog.youkuaiyun.com/qq_39905409/article/details/121680467

mxGraph 专栏收录该内容

2 篇文章

订阅专栏

效果图：
在这里插入图片描述

1、使用css3定义流动的class

/**
* 管道动画
* 线段长度为8，每0.5s执行一次keyframes中定义的dash动作，且无限循环执行
*/
.flowStyle {
  stroke-dasharray: 8;
  animation: dash 0.5s linear;
  animation-iteration-count: infinite;
}
@keyframes dash {
  to {
    stroke-dashoffset: -16;
  }
}

2、给管道添加流动动画

addAnimation (cells) {
  // 取出需要添加动画的管道线,这里随机取的第二个管道 - 可自定义
  const cell = cells.filter(item => item.edge)[1]; 
  const state = this.graph.view.getState(cell);
  
  // 设置管道可见，宽度为6，且为亮灰色
  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");
  
  // 设置流动线段宽度为3，红色，并添加流动动画
  state.shape.node.getElementsByTagName("path")[1].setAttribute("stroke-width", "3");
  state.shape.node.getElementsByTagName("path")[1].setAttribute("stroke", "red");
  state.shape.node.getElementsByTagName("path")[1].setAttribute("class", "flowStyle");
  
  // 设置箭头为红色
  state.shape.node.getElementsByTagName("path")[2].setAttribute("stroke", "red");
  state.shape.node.getElementsByTagName("path")[2].setAttribute("fill", "red");   
},