mxGraph添加流动的管道动画

效果图：

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");
},

mxGraph添加流动的管道动画相关推荐

html加动画不改变高度,怎么为不定高度(height:auto)的元素添加CSS3 transition-property:height 动画...
如何为不定高度(height:auto)的元素添加CSS3 transition-property:height 动画但一个元素不设置height时,它的默认值是 auto,浏览器会计算出实际的高度 ...
对v-for生成的元素添加不同的animate动画
1.需求: 有4个通过v-for生成的div,需要对第1个和第3个添加上划进入动画slideInUp,第2个和第4个添加下划进入动画slideInDown. 2.方法: 通过index%2==0判断元 ...
Android把商品添加到购物车的动画效果（贝塞尔曲线）
当我们写商城类的项目的时候,一般都会有加入购物车的功能,加入购物车的时候会有一些抛物线动画,具体代码如下: 实现效果如图: 思路: 确定动画的起终点在起终点之间使用二次贝塞尔曲线填充起终点之间的点的 ...
android动画变黑,Activity添加进入和退出动画的两种方式，解决黑色区域问题
Activity添加进入和退出动画的两种方式,解决黑色区域问题给Activity添加进入和退出动画的操作,大家一定不会陌生.常见的有两种方式,一种是通过style文件给Activity设置Theme ...
python 管道游戏_Python实现超级玛丽游戏系列教程05添加地面，管道和阶梯冲突检测...
配套视频教程项目代码冲突检测添加地面冲突添加管道冲突添加阶梯冲突添加冲突完成def setup_ground(self): """Create collide ...
Android开发之购物车添加商品实现抛物线动画
老套路先上图:第一个是个人项目用到的效果图,第二个数抠出来的demo 说下思路很简单:第一步先拿到加号图片在屏幕的坐标(X,Y),然后拿到加号按钮图片的大小,然后将拿到的坐标和大小复制给一个新的图片按 ...
Hexo+yilia添加helper-live2d插件宠物动画，很好玩的哦~~
个人主页:https://www.yuehan.online 现在博客:www.wangyurui.top 安装模块: 博客根目录选择cmd命令窗口或者git bash 输入以下代码,安装插件操作: ...
unity 添加人物控制器行走动画
效果:上下左右控制人物行走 1.添加人物模型,(一个双臂张开的稻草人一动不动地矗在那) 2.给人物添加animator组件,并双击编辑 3.拖入人物的站立,行走,跑动等姿势,并建立关联,右键make ...
android 百度地图marker点添加，删除，动画
LatLng point = new LatLng(markx,marky);//坐标参数(纬度,经度) BitmapDescriptor bitmap = BitmapDescriptorFacto ...

mxGraph添加流动的管道动画

mxGraph添加流动的管道动画相关推荐

最新文章

热门文章