Custom animation on link

GoJS
1

hey Walter, was just wondering if we can create custom animation on links.

For instance, i have two nodes connected by a link and I want to show an execution flow.

When the first node is running (assume i have written a code on a button click where it reads the gojs model data and reads the data in the node and calls some async api), it has a green aura and after its excuted, there is a say a stick figure thats walks from the current executed node to the next one and then the next one starts to glow.

Hope you get the picture. is this possible in gojs?

2

The basic idea is to vary a link label’s GraphObject.segmentFraction property (you’ll probably want to set that label’s GraphObject.segmentIndex to NaN).

There are examples at:
Animation | GoJS
Path Animation | GoJS

3

i get the segment fraction that but can i animate a stick figure or probably a small person walking on the link from one node to the other?

4

Would an animated GIF suffice? If so, do you have one that I can use for a demo?

5

yes a GIF will do … you could try with the attached sample gif or any gif that could be used as an example
IMG_0027

6

That one has a lot of whitespace around the figure, in particular underneath its feet. And it has an opaque background. Is that what you want?

7

Somewhat yes… probably would use a different gif but since i dont have one handy yet you can use the above one or any other one that you could find for a better demonstration.

8 
<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2024 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <button id="myTestButton">Start Walking Animations</button>

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const myDiagram =
  new go.Diagram("myDiagramDiv", {
      renderer: "svg",
      layout: new go.ForceDirectedLayout(),
      "undoManager.isEnabled": true
    });

myDiagram.nodeTemplate =
  new go.Node("Auto")
    .add(
      new go.Shape("RoundedRectangle", { fill: "white", strokeWidth: 0 })
        .bind("fill", "color"),
      new go.TextBlock({ margin: 8 })
        .bind("text")
    );

myDiagram.linkTemplate =
  new go.Link()
    .add(
      new go.Shape(),
      new go.Shape({ toArrow: "OpenTriangle" }),
      new go.Picture("80e3ec0bf1df8f0a314cee2f39000c637d272655.gif", {
        name: "WALKER",
        scale: 0.15,
        segmentOrientation: go.Link.OrientAlong,
        segmentIndex: NaN,  // fraction extends along whole path
        segmentFraction: 0.5,  // initial fraction
        alignmentFocus: go.Spot.Bottom
      })
    );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", color: "lightblue" },
  { key: 2, text: "Beta", color: "orange" },
  { key: 3, text: "Gamma", color: "lightgreen" },
  { key: 4, text: "Delta", color: "pink" }
],
[
  { from: 1, to: 2 },
  { from: 1, to: 3 },
  { from: 3, to: 4 },
  { from: 4, to: 1 }
]);

go.AnimationManager.defineAnimationEffect('fraction',
  (obj, startValue, endValue, easing, currentTime, duration, animation) => {
    obj.segmentFraction = easing(currentTime, startValue, endValue - startValue, duration);
  });

var anim = null;
function startAnimation() {
  if (anim) anim.stop();
  anim = new go.Animation();
  anim.duration = 3000;
  anim.runCount = Infinity;
  myDiagram.links.each(link => {
    const walker = link.findObject("WALKER");
    if (walker) anim.add(walker, "fraction", 0, 1);
  });
  anim.start();
}
document.getElementById("myTestButton").addEventListener("click", startAnimation);

startAnimation();
  </script>
</body>
</html>