gojs实现蚂蚁线动画效果


Posted in Javascript onFebruary 18, 2022

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

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

一、gojs 实现

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

举例:国庆快到了,出游,从上海到北京,假设当前正在途径安徽到山东的路上。用 gojs 绘制出来如下:

gojs实现蚂蚁线动画效果

1. 绘图

<!-- 容器 -->
<div id="myDiagramDiv" style="height:600px;width:100%;border:1px solid black"></div>
<!-- 引入gojs -->
<script src="https://unpkg.com/gojs/release/go.js"></script>
// 生成器
const $ = go.GraphObject.make;

// 定义容器,myDiagramDiv 为容器 id
const diagram = $(go.Diagram, 'myDiagramDiv');

// 节点模板,描述了如何构造每个节点
diagram.nodeTemplate = $(go.Node, "Auto", // 框自动适应文本
  $(go.Shape, "RoundedRectangle", new go.Binding("fill", "color")),
  $(go.TextBlock, {margin: 5}, new go.Binding("text", "name"))
);

// 定义model, 描述节点信息和连线信息
diagram.model = new go.GraphLinksModel(
  [ // 节点
    { key: 'shanghai', name: "出发地 上海", color: "lightblue" },
    { key: 'jiangsu', name: "途径地 江苏", color: "pink" },
    { key: 'anhui', name: "途径地 安徽", color: "pink" },
    { key: 'shandong', name: "途径地 山东", color: "orange"},
    { key: 'hebei', name: "途径地 河北", color: "orange" },
    { key: 'tianjin', name: "途径地 天津", color: "orange" },
    { key: 'beijing', name: "目的地 北京", color: "lightgreen" }
  ],
  [ // 连线
    { from: "shanghai", to: "jiangsu" },
    { from: "jiangsu", to: "anhui" },
    { from: "anhui", to: "shandong" },
    { from: "shandong", to: "hebei" },
    { from: "hebei", to: "tianjin" },
    { from: "tianjin", to: "beijing" }
  ]
);

至此,一个简单的出游途径地关系图就绘制好了,但是没有虚线动画。

2. 虚线实现

观察实现的图中既有实线,也有虚线,所以这儿需要用到 templateMap

定义实线及虚线模板

// 定义集合,存储实线、虚线模板
const templmap = new go.Map()
const color = '#000'

// 默认连线模板
const defaultTemplate = $(
  go.Link,
  $(go.Shape, { stroke: color, strokeWidth: 1 }),
  $(go.Shape, { toArrow: 'Standard', fill: color, stroke: color, strokeWidth: 1 })
)

// 虚线连线模板,关键属性:strokeDashArray: [6, 3]
const dashedTemplate = $(
  go.Link,
  // name: 'dashedLink',后面动画用到
  $(go.Shape, { name: 'dashedLink', stroke: color, strokeWidth: 1, strokeDashArray: [6, 3] }),
  $(go.Shape, { toArrow: 'Standard', fill: color, stroke: color, strokeWidth: 1 })
)

templmap.add('', defaultTemplate)
// dashed 为名称,描述时用属性 category: 'dashed' 指定
templmap.add('dashed', dashedTemplate)

diagram.linkTemplateMap = templmap

model 数据找到需要描述为虚线的边,加如属性:category: 'dashed',名称需要和定义模板指定的名称一致

{ from: "anhui", to: "shandong", category: 'dashed' },

至此,实线、虚线,都绘制好了。接下来就是最后的动画了。

3. 让虚线动起来

找到虚线,更改属性:strokeDashOffset

有两种方式

  • 方式1:go.Animation,会导致节点端口交互时连线操作有粘粘效果
function animation () {
  const animation = new go.Animation();
  // 虚线动画
  diagram.links.each((link) => {
    const dashedLink = link.findObject("dashedLink");
    if (dashedLink) {
      animation.add(dashedLink, "strokeDashOffset", 10, 0)
    }
  });

  animation.easing = go.Animation.EaseLinear;
  // Run indefinitely
  animation.runCount = Infinity;
  animation.start();
}
animation()
  • 方式2:timeout
function animation () {
  const loop = () => {
    animationTimer = setTimeout(() => {
      const oldskips = diagram.skipsUndoManager;
      diagram.skipsUndoManager = true;
      // 虚线动画
      diagram.links.each((link) => {
        const dashedLinkShape = link.findObject("dashedLink");
        if (dashedLinkShape) {
          const off = dashedLinkShape.strokeDashOffset - 3;
          // 设置(移动)笔划划动画
          dashedLinkShape.strokeDashOffset = (off <= 0) ? 60 : off;
        }
      });

      diagram.skipsUndoManager = oldskips;
      loop();
    }, 180);
  }
  loop()
}
animation()

动画的两种方式,如果没有节点端口连线交互,建议用第一种方式实现,库的动画(可能内部做了优化)。如果想更灵活的控制动画或者第一种实现不了时,那么请用第二种方式。

至此,整个效果就完成了。

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

上面的代码,主要用到了 2 个关键的属性:strokeDashArraystrokeDashOffset

文档上有这么两行说明:

For more information, see Stroke Line Dash Array (w3.org),see Stroke Line Dash Offset (w3.org)

背后就是 canvas,及其两个属性 setLineDashlineDashOffset

参考:

mdn - setLineDah:一个Array数组。一组描述交替绘制线段和间距(坐标空间单位)长度的数字。 如果数组元素的数量是奇数, 数组的元素会被复制并重复。

代码示例:

function drawDashedLine(pattern) {
  ctx.beginPath();
  ctx.setLineDash(pattern);
  ctx.moveTo(0, y);
  ctx.lineTo(300, y);
  ctx.stroke();
  y += 20;
}

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let y = 15;

drawDashedLine([]);
drawDashedLine([1, 1]);
drawDashedLine([10, 10]);
drawDashedLine([20, 5]);
drawDashedLine([15, 3, 3, 3]);
drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3]);
drawDashedLine([12, 3, 3]);  // Equals [12, 3, 3, 12, 3, 3]

gojs实现蚂蚁线动画效果

mdn - lineDashOffset:设置虚线偏移量的属性

代码示例:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var offset = 0;

function draw() {
  ctx.clearRect(0,0, canvas.width, canvas.height);
  ctx.setLineDash([4, 2]);
  ctx.lineDashOffset = -offset;
  ctx.strokeRect(10,10, 100, 100);
}

function march() {
  offset++;
  if (offset > 16) {
    offset = 0;
  }
  draw();
  setTimeout(march, 20);
}

march();

三、虚线的一些概念

虚线:(数学概念)以点或者短线画成的断续的线,多用于几何图形或者标记。

为什么虚线称为蚂蚁线?
在图像影像软件中表示选区的动态虚线,因为虚线闪烁的样子像是一群蚂蚁在跑,所以俗称蚂蚁线。
在Photoshop,After Effect等软件中比较常见。

蚂蚁线:动物的一种本能现象,领头的蚂蚁以随机的路线走向食物或洞穴,第二只蚂蚁紧跟其后以相同的路线行走,每一个后来的蚂蚁紧跟前面蚂蚁行走,排成一条线的现象。

虚线的特征:流动性

四、css 绘制边框虚线

利用 css 的 border-style 绘制,有两个属性值:

  • dotted:显示为一系列圆点。标准中没有定义两点之间的间隔大小,视不同实现而定。圆点半径是 border-width 计算值的一半。
  • dashed:显示为一系列短的方形虚线。标准中没有定义线段的长度和大小,视不同实现而定。

具体参考 mdn - border-style

css 原生属性能实现虚线效果,但是要在此基础上实现动画,不容易。但是可以用 css 的其他属性来实现。

示例:

<div class="container">蚂蚁线</div>
.container {
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid transparent;
  background: linear-gradient(white, white) padding-box,
    repeating-linear-gradient(-45deg, black 0, black, 25%, transparent 0, transparent 50%) 0% 0% / 0.6em 0.6em;
  animation: ants 10s linear infinite;
}

@keyframes ants {
  to {
    background-position: 100% 100%;
  }
}

gojs实现蚂蚁线动画效果

到此这篇关于gojs实现蚂蚁线动画效果的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
JavaScript极简入门教程(二):对象和函数
Oct 25 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
layui table 参数设置方法
Aug 14 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 #Javascript
详解TypeScript的基础类型
Feb 18 #Javascript
详解jQuery的核心函数和事件处理
Feb 18 #jQuery
JavaScript事件的委托(代理)的用法示例详解
Feb 18 #Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 #Vue.js
vue3获取当前路由地址
Feb 18 #Vue.js
如何利用React实现图片识别App
You might like
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
javascript radio 联动效果
2009/03/04 Javascript
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
Layui实现带查询条件的分页
2019/07/27 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
JavaScript命令模式原理与用法实例详解
2020/03/10 Javascript
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
Python 操作文件的基本方法总结
2017/08/10 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
文明家庭先进事迹材
2014/01/27 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
管理工程专业求职信
2014/08/10 职场文书
学校社团活动总结
2015/05/07 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
利用python进行数据加载
2021/06/20 Python
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android