Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use gojs to achieve ant line animation effect", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use gojs to achieve ant line animation effect" bar!

When drawing the dag diagram, the relationship between the nodes is represented by the connection between the nodes and the arrows. Nodes often have states. In order to better represent the flow relationship between nodes, the nodes in loading state and subsequent nodes need to be represented by animated dotted lines, indicating that they are being processed and will become solid lines after processing. Between the principle and the fact that the page is not loaded, adding a loading prompt can provide a better interactive experience.

So how do you achieve this effect with gojs? Dashed line, and dashed line animation

What is the principle behind dashed lines and dashed animation?

Why is the dotted line called ant line again?

Can pure css be implemented?

1. Gojs implementation

For the basic use of gojs, please refer to the previous article data Visualization gojs for a brief introduction.

For example: the National Day is coming, travel from Shanghai to Beijing, assuming that we are currently on the way from Anhui to Shandong. Draw it with gojs as follows:

1. Drawing / / generator const $= go.GraphObject.make;// defines the container, myDiagramDiv is the container idconst diagram = $(go.Diagram, 'myDiagramDiv') / / Node template, which describes how to construct each node diagram.nodeTemplate = $(go.Node, "Auto", / / box automatically adapts the text $(go.Shape, "RoundedRectangle", new go.Binding ("fill", "color")), $(go.TextBlock, {margin: 5}, new go.Binding ("text", "name") / / define model, describe node information and connection information diagram.model = new go.GraphLinksModel ([/ / Node {key: 'shanghai', name: "from Shanghai", color: "lightblue"}, {key:' jiangsu', name: "Jiangsu", color: "pink"}, {key: 'anhui', name: "Anhui", color: "pink"} {key: 'shandong', name: "Shandong", color: "orange"}, {key:' hebei', name: "Hebei", color: "orange"}, {key: 'tianjin', name: "Tianjin", color: "orange"}, {key:' beijing', name: "destination Beijing", color: "lightgreen"}] [/ / connect {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 diagram is drawn, but there is no dotted line animation.

two。 Dotted line realization

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

Define solid and dashed templates

/ / define a collection to store solid and dashed templates const templmap = new go.Map () const color ='# 000Think / default connection template const defaultTemplate = $(go.Link, $(go.Shape, {stroke: color, strokeWidth: 1}), $(go.Shape, {toArrow: 'Standard', fill: color, stroke: color, strokeWidth: 1})) / / dotted connection template Key attributes: strokeDashArray: [6,3] const dashedTemplate = $(go.Link, / / name: 'dashedLink', later animation uses $(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 Specify templmap.add ('dashed', dashedTemplate) diagram.linkTemplateMap = templmap with the attribute category:' dashed'

Model data finds the edge that needs to be described as a dashed line, such as the attribute: category: 'dashed', name needs to be the same as the name specified by the definition template

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

At this point, both solid and dashed lines have been drawn. And then there's the final animation.

3. Let the dotted line move

Find the dotted line and change the property: strokeDashOffset

There are two ways.

Mode 1:go.Animation will result in sticky effect of connection operation when nodes interact with each other.

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

Mode 2:timeout

Function animation () {const loop = () = > {animationTimer = setTimeout (()) = > {const oldskips = diagram.skipsUndoManager; diagram.skipsUndoManager = true; / / dashed 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 16) {offset = 0;} draw (); setTimeout (march, 20);} march (); third, some concepts of dotted lines

Dotted line: (mathematical concept) an intermittent line drawn with dots or short lines, often used in geometric figures or markers.

Why is the dotted line called the ant line?

In the image software to represent the dynamic dotted line of the selection, because the dotted line flashes like a group of ants running, so it is commonly known as the ant line.

It is quite common in software such as Photoshop,After Effect.

Ant line: an animal instinct in which the leading ant takes a random route to the food or cave, the second ant follows it along the same route, and each later ant follows the ant in front of it in a line.

Characteristics of dotted lines: liquidity

4. Css draws dashed border lines

Drawn with css's border-style, there are two attribute values:

Dotted: displays as a series of dots. The size of the interval between two points is not defined in the standard, depending on the implementation. The radius of the dot is half that calculated by border-width.

Dashed: displays as a series of short square dashed lines. The length and size of line segments are not defined in the standard, depending on the implementation.

See mdn-border-style for more information.

Css native performance to achieve dotted line effect, but to achieve animation on this basis, it is not easy. However, it can be implemented with other properties of css.

Example:

Ant line .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.6em 0.6 em.animation: ants 10s linear infinite;} @ keyframes ants {to {background-position: 100%;}}

Thank you for your reading, the above is "how to use gojs to achieve ant line animation effect" content, after the study of this article, I believe you on how to use gojs to achieve ant line animation effect of this problem has a deeper understanding, the specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.