Gojs implements ant line animation effect

When drawing a dag graph, the relationship between nodes is represented by the connection lines between nodes and arrows. Nodes often have states. In order to better represent the process relationship between nodes, nodes in the loading state need to be represented by animated dotted lines between subsequent nodes to indicate that they are being processed. They will become solid lines after processing. The principle is the same as adding a loading prompt before the page is loaded, which can provide a better interactive experience.

• So how to achieve this effect with gojs? Dashed lines and dashed line animations
• What is the principle behind dotted lines and dotted line animation?
• Why is the dotted line also called the ant line?
• Is this possible with pure CSS?

1. Gojs Implementation

For the basic usage of gojs, please refer to the previous article Simple introduction to using gojs for data visualization.

For example: National Day is coming soon, and you want to travel from Shanghai to Beijing. Suppose you are currently on the way from Anhui to Shandong via Anhui. Draw it with gojs as follows:

1. Drawing

 <!-- Container -->
<div id="myDiagramDiv" style="height:600px;width:100%;border:1px solid black"></div>

 <!-- Import gojs -->
<script src="https://unpkg.com/gojs/release/go.js"></script>

 // Generator const $ = go.GraphObject.make;

// Define the container, myDiagramDiv is the container id
const diagram = $(go.Diagram, 'myDiagramDiv');

// Node template, describes how to construct each node diagram.nodeTemplate = $(go.Node, "Auto", // The box automatically adapts to the text $(go.Shape, "RoundedRectangle", new go.Binding("fill", "color")),
  $(go.TextBlock, {margin: 5}, new go.Binding("text", "name"))
);

// Define model to describe node and link information diagram.model = new go.GraphLinksModel(
  [ // Node { key: 'shanghai', name: "Departure point Shanghai", color: "lightblue" },
    { key: 'jiangsu', name: "Jiangsu", color: "pink" },
    { key: 'anhui', name: "Anhui", color: "pink" },
    { key: 'shandong', name: "Shandong", color: "orange"},
    { key: 'hebei', name: "Passing through Hebei", color: "orange" },
    { key: 'tianjin', name: "Tianjin via", color: "orange" },
    { key: 'beijing', name: "Destination Beijing", color: "lightgreen" }
  ],
  [ // Connection { from: "shanghai", to: "jiangsu" },
    { from: "jiangsu", to: "anhui" },
    { from: "anhui", to: "shandong" },
    { from: "shandong", to: "hebei" },
    { from: "hebei", to: "tianjin" },
    { from: "tianjin", to: "beijing" }
  ]
);

At this point, a simple travel route relationship diagram has been drawn, but there is no dotted line animation.

2. Dashed line implementation

Observe that there are both solid lines and dotted lines in the implemented diagram, so templateMap is needed here.

Define solid and dashed line templates

 // Define a collection to store solid and dotted line templates const templmap = new go.Map()
const color = '#000'

//Default connection template const defaultTemplate = $(
  go.Link,
  $(go.Shape, { stroke: color, strokeWidth: 1 }),
  $(go.Shape, { toArrow: 'Standard', fill: color, stroke: color, strokeWidth: 1 })
)

// Dashed line template, key attributes: strokeDashArray: [6, 3]
const dashedTemplate = $(
  go.Link,
  // name: 'dashedLink', used in the animation later $(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 is the name, and the description is specified using the attribute category: 'dashed' templmap.add('dashed', dashedTemplate)

diagram.linkTemplateMap = templmap

In the model data, find the edge that needs to be described as a dashed line and add the attribute category: 'dashed' . The name must be the same as the name specified in the definition template.

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

At this point, both the solid line and the dotted line have been drawn. Next is the final animation.

3. Make the dotted line move

Find the dashed line and change the property: strokeDashOffset

There are two ways

• Method 1: go.Animation will cause the connection operation to have a sticky effect when the node port interacts

 function animation () {
  const animation = new go.Animation();
  // dotted line 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()

• Method 2: timeout

 function animation () {
  const loop = () => {
    animationTimer = setTimeout(() => {
      const oldskips = diagram.skipsUndoManager;
      diagram.skipsUndoManager = true;
      // dotted line animation diagram.links.each((link) => {
        const dashedLinkShape = link.findObject("dashedLink");
        if (dashedLinkShape) {
          const off = dashedLinkShape.strokeDashOffset - 3;
          // Set (move) stroke animation dashedLinkShape.strokeDashOffset = (off <= 0) ? 60 : off;
        }
      });

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

There are two ways of animation. If there is no node port connection interaction, it is recommended to use the first way to implement the library animation (may be optimized internally). If you want more flexible control of the animation or the first method is not possible, please use the second method.

At this point, the whole effect is complete.

2. The principles behind dotted lines and dotted line animations

The above code mainly uses two key properties: strokeDashArray and strokeDashOffset.

There are two lines in the document:

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

Behind it is canvas and its two properties setLineDash and lineDashOffset

refer to:

mdn - setLineDah: an Array array. An array of numbers describing the length of the alternating line segments and the spacing between them (in coordinate space units). If the number of array elements is odd, the elements of the array are copied and repeated.

Code example:

 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] 

mdn - lineDashOffset: Sets the dashed line offset property

Code example:

 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();

3. Some concepts of dotted lines

Dashed line: (Mathematical concept) A discontinuous line drawn with dots or short lines, mostly used in geometric figures or marks.

Why is the dotted line called an ant line?
The dynamic dotted line that represents the selection area in image software is commonly known as the ant line because the flashing dotted line looks like a group of ants running.
It is common in software such as Photoshop and After Effect.

Ant line: an instinctive phenomenon of animals, in which the leading ant walks towards food or caves in a random route, the second ant follows closely behind it and walks along the same route, and each subsequent ant follows the ant in front and walks in a line.

Characteristics of dotted lines: fluidity

4. CSS drawing border dashed line

Draw using CSS border-style, there are two property values:

• dotted: Displayed as a series of dots. The size of the interval between two points is not defined in the standard and depends on different implementations. The dot radius is half of the calculated border-width.
• dashed: Displayed as a series of short square dashed lines. The length and size of line segments are not defined in the standard and depend on different implementations.

For details, please refer to mdn-border-style

The native CSS properties can achieve the dotted line effect, but it is not easy to implement animation based on this. But it can be achieved using other CSS properties.

Example:

 <div class="container">Ant line</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%;
  }
} 

This concludes this article on how to use Gojs to implement ant line animation effects. I hope it will be helpful for everyone’s study, and I also hope that everyone will support 123WORDPRESS.COM.