如何将GoJS的蚂蚁线动画改写为长尾词？

本文共计2074个文字，预计阅读时间需要9分钟。

目录

一、gojs实现

1.绘图

2.虚线实现

3.让虚线动起来

二、虚线及虚线动画背后的原理

三、虚线的一些概念

四、CSS绘制边框虚线

五、在绘制DAG图时，通过节点和箭头来表示节点

目录

• 一、gojs 实现
• 1. 绘图
• 2. 虚线实现
• 3. 让虚线动起来
• 二、虚线及虚线动画背后的原理
• 三、虚线的一些概念
• 四、css 绘制边框虚线

在绘制 dag 图时，通过节点和来箭头的连线来表示节点彼此之间的关系。而节点常常又带有状态，为了更好的表示节点之间的流程关系，loading 状态的节点，与后续节点之间，需要用 动画着的虚线 表示，表示正在处理中，处理完才会变成实线。原理同页面没加载出来之间，加个 loading 提示，能提供更好的交互体验。

• 那么如何用 gojs 实现这个效果呢？虚线，及虚线动画
• 虚线及虚线动画的背后原理是什么？
• 虚线为什么又叫蚂蚁线？
• 纯 css 可以实现吗？

一、gojs 实现

gojs 的基础使用，可参考之前写的文章数据可视化 gojs 简单使用介绍。