Gojs implementiert Ameisenlinien-Animationseffekt

Beim Zeichnen eines DAG-Diagramms wird die Beziehung zwischen Knoten durch die Verbindungslinien zwischen Knoten und Pfeilen dargestellt. Knoten haben häufig Zustände. Um die Prozessbeziehung zwischen Knoten besser darzustellen, müssen Knoten im Ladezustand durch animierte gepunktete Linien zwischen aufeinanderfolgenden Knoten dargestellt werden, um anzuzeigen, dass sie verarbeitet werden. Nach der Verarbeitung werden sie zu durchgezogenen Linien. Das Prinzip ist dasselbe wie das Hinzufügen einer Ladeaufforderung vor dem Laden der Seite, was für ein besseres interaktives Erlebnis sorgen kann.

• Wie also kann dieser Effekt mit Gojs erzielt werden? Gestrichelte Linien und gestrichelte Linienanimationen
• Was ist das Prinzip hinter gepunkteten Linien und gepunkteten Linienanimationen?
• Warum wird die gepunktete Linie auch Ameisenlinie genannt?
• Ist dies mit reinem CSS möglich?

1. Gojs-Implementierung

Informationen zur grundlegenden Verwendung von Gojs finden Sie im vorherigen Artikel „Einfache Einführung in die Verwendung von Gojs zur Datenvisualisierung“.

Beispiel: Der Nationalfeiertag steht vor der Tür und Sie möchten von Shanghai nach Peking reisen. Angenommen, Sie sind derzeit auf dem Weg von Anhui über Anhui nach Shandong. Zeichnen Sie es mit Gojs wie folgt:

1. Zeichnung

 <!-- Behälter -->
<div id="myDiagramDiv" style="Höhe:600px;Breite:100%;Bord:1px durchgezogen schwarz"></div>

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

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

//Definieren Sie den Container, myDiagramDiv ist die Container-ID
const Diagramm = $ (go.Diagram, 'myDiagramDiv');

// Knotenvorlage, beschreibt wie die einzelnen Knoten diagram.nodeTemplate = $(go.Node, "Auto", // Die Box passt sich automatisch dem Text an $(go.Shape, "RoundedRectangle", new go.Binding("fill", "color")),
  $(go.TextBlock, {margin: 5}, neues go.Binding("text", "name"))
);

// Modell definieren, um Knoten- und Linkinformationen zu beschreiben diagram.model = new go.GraphLinksModel(
  [ // Node { key: 'shanghai', name: "Abfahrtsort Shanghai", color: "hellblau" },
    { Schlüssel: 'jiangsu', Name: "Jiangsu", Farbe: "pink" },
    { Schlüssel: 'anhui', Name: "Anhui", Farbe: "pink" },
    { Schlüssel: 'shandong', Name: "Shandong", Farbe: "orange"},
    { key: 'hebei', name: "Durch Hebei", color: "orange" },
    { Schlüssel: 'tianjin', Name: "Tianjin via", Farbe: "orange" },
    { Schlüssel: 'Beijing', Name: "Reiseziel Peking", Farbe: "hellgrün" }
  ],
  [ // Verbindung { von: "shanghai", nach: "jiangsu" },
    { von: "jiangsu", nach: "anhui" },
    { von: "anhui", nach: "shandong" },
    { von: "shandong", nach: "hebei" },
    { von: "hebei", nach: "tianjin" },
    { von: "Tianjin", nach: "Peking" }
  ]
);

An dieser Stelle wurde ein einfaches Reiserouten-Beziehungsdiagramm gezeichnet, es gibt jedoch keine gepunktete Linienanimation.

2. Gestrichelte Linie Implementierung

Beachten Sie, dass im implementierten Diagramm sowohl durchgezogene als auch gepunktete Linien vorhanden sind. Daher wird hier templateMap benötigt.

Definieren Sie durchgezogene und gestrichelte Linienvorlagen

 // Definieren Sie eine Sammlung zum Speichern von Vorlagen mit durchgezogenen und gepunkteten Linien const templmap = new go.Map()
Konstantenfarbe = "#000"

//Standardverbindungsvorlage const defaultTemplate = $(
  gehe.Link,
  $(go.Shape, { Strich: Farbe, Strichbreite: 1 }),
  $(go.Shape, { toArrow: 'Standard', Füllung: Farbe, Strich: Farbe, Strichbreite: 1 })
)

// Vorlage für gestrichelte Linie, Schlüsselattribute: strokeDashArray: [6, 3]
const dashedTemplate = $(
  gehe.Link,
  // Name: 'dashedLink', wird später in der Animation verwendet $(go.Shape, { name: 'dashedLink', stroke: color, strokeWidth: 1, strokeDashArray: [6, 3] }),
  $(go.Shape, { toArrow: 'Standard', Füllung: Farbe, Strich: Farbe, Strichbreite: 1 })
)

templmap.add('', Standardvorlage)
// gestrichelt ist der Name und die Beschreibung wird mithilfe der Attributkategorie angegeben: „gestrichelt“ templmap.add(„gestrichelt“, „gestricheltTemplate“)

diagram.linkTemplateMap = templmap

Suchen Sie in den Modelldaten die Kante, die als gestrichelte Linie beschrieben werden soll, und fügen Sie die Attributkategorie category: 'dashed' hinzu. Der Name muss mit dem in der Definitionsvorlage angegebenen Namen übereinstimmen.

 { von: "Anhui", nach: "Shandong", Kategorie: "gestrichelt" },

An diesem Punkt wurden sowohl die durchgezogene Linie als auch die gepunktete Linie gezeichnet. Als nächstes folgt die endgültige Animation.

3. Bewegen Sie die gepunktete Linie

Suchen Sie die gestrichelte Linie und ändern Sie die Eigenschaft: strokeDashOffset

Es gibt zwei Möglichkeiten

• Methode 1: go.Animation bewirkt, dass der Verbindungsvorgang einen klebrigen Effekt hat, wenn der Knotenport interagiert

 Funktion Animation () {
  const animation = neue go.Animation();
  // gepunktete Linienanimation diagram.links.each((link) => {
    const dashedLink = link.findObject("dashedLink");
    if (gestrichelter Link) {
      animation.add(gestrichelter Link, "Strichstrichversatz", 10, 0)
    }
  });

  : Animation.easing = go.Animation.EaseLinear;
  // Unbegrenzt laufen
  animation.runCount = Unendlich;
  Animation starten();
}
Animation()

• Methode 2: Timeout

 Funktion Animation () {
  const-Schleife = () => {
    animationTimer = setTimeout(() => {
      const oldskips = diagram.skipsUndoManager;
      diagram.skipsUndoManager = true;
      // gepunktete Linienanimation diagram.links.each((link) => {
        const dashedLinkShape = link.findObject("dashedLink");
        if (gestrichelteLinkForm) {
          const off = dashedLinkShape.strokeDashOffset - 3;
          // Strichanimation einstellen (verschieben) dashedLinkShape.strokeDashOffset = (aus <= 0) ? 60 : aus;
        }
      });

      diagram.skipsUndoManager = alte Überspringvorgänge;
      Schleife();
    }, 180);
  }
  Schleife()
}
Animation()

Es gibt zwei Arten der Animation. Wenn keine Interaktion über die Knotenportverbindung besteht, wird empfohlen, die erste Methode zur Implementierung der Bibliotheksanimation zu verwenden (kann intern optimiert werden). Wenn Sie eine flexiblere Steuerung der Animation wünschen oder die erste Methode nicht möglich ist, verwenden Sie bitte die zweite Methode.

An diesem Punkt ist der gesamte Effekt abgeschlossen.

2. Die Prinzipien hinter gepunkteten Linien und gepunkteten Linienanimationen

Der obige Code verwendet hauptsächlich zwei Schlüsseleigenschaften: strokeDashArray und strokeDashOffset.

Das Dokument enthält zwei Zeilen:

Weitere Informationen finden Sie unter „Stroke Line Dash Array“ (w3.org) und „Stroke Line Dash Offset“ (w3.org).

Dahinter befindet sich Canvas und seine beiden Eigenschaften setLineDash und lineDashOffset

siehe:

mdn - setLineDah: ein Array-Array. Ein Zahlenarray, das die Länge der abwechselnden Liniensegmente und den Abstand zwischen ihnen (in Koordinatenraumeinheiten) beschreibt. Wenn die Anzahl der Array-Elemente ungerade ist, werden die Elemente des Arrays kopiert und wiederholt.

Codebeispiel:

 Funktion zeichneDashedLine(Muster) {
  ctx.beginPath();
  ctx.setLineDash(Muster);
  ctx.moveTo(0, y);
  ctx.lineTo(300, y);
  ctx.stroke();
  y += 20;
}

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

zeichneGestrichelteLinie([]);
zeichneGestrichelteLinie([1, 1]);
zeichneDashedLine([10, 10]);
zeichneDashedLine([20, 5]);
zeichneDashedLine([15, 3, 3, 3]);
zeichneDashedLine([20, 3, 3, 3, 3, 3, 3, 3]);
drawDashedLine([12, 3, 3]); // Ist gleich [12, 3, 3, 12, 3, 3] 

mdn - lineDashOffset: Legt die Eigenschaft für den Versatz der gestrichelten Linie fest

Codebeispiel:

 var Leinwand = document.getElementById("Leinwand");
var ctx = canvas.getContext("2d");
Var-Offset = 0;

Funktion zeichnen() {
  ctx.clearRect(0,0, Leinwandbreite, Leinwandhöhe);
  ctx.setLineDash([4, 2]);
  ctx.lineDashOffset = -offset;
  ctx.strokeRect(10,10, 100, 100);
}

Funktion marschieren() {
  Versatz++;
  wenn (Offset > 16) {
    Versatz = 0;
  }
  ziehen();
  setTimeout(März, 20);
}

Marsch();

3. Einige Konzepte gepunkteter Linien

Gestrichelte Linie: (Mathematisches Konzept) Eine unterbrochene Linie, die mit Punkten oder kurzen Linien gezeichnet wird und hauptsächlich in geometrischen Figuren oder Markierungen verwendet wird.

Warum wird die gepunktete Linie Ameisenlinie genannt?
Die dynamische gepunktete Linie, die den Auswahlbereich in Bildsoftware darstellt, wird allgemein als Ameisenlinie bezeichnet, da die blinkende gepunktete Linie wie eine Gruppe laufender Ameisen aussieht.
Dies ist in Software wie Photoshop und After Effect üblich.

Ameisenreihe: ein instinktives Phänomen bei Tieren, bei dem die führende Ameise auf einem zufälligen Weg in Richtung Nahrung oder Höhlen läuft, die zweite Ameise ihr dicht auf den Fersen ist und denselben Weg läuft, und jede nachfolgende Ameise der Ameise vor ihr folgt und in einer Reihe läuft.

Eigenschaften gepunkteter Linien: Fließfähigkeit

4. Gestrichelte Linie des CSS-Zeichenrahmens

Zeichnen Sie im CSS-Rahmenstil. Es gibt zwei Eigenschaftswerte:

• gepunktet: Wird als Reihe von Punkten angezeigt. Die Größe des Intervalls zwischen zwei Punkten ist im Standard nicht definiert und hängt von verschiedenen Implementierungen ab. Der Punktradius beträgt die Hälfte der berechneten Rahmenbreite.
• gestrichelt: Wird als Reihe kurzer, quadratischer, gestrichelter Linien angezeigt. Die Länge und Größe von Liniensegmenten sind im Standard nicht definiert und hängen von verschiedenen Implementierungen ab.

Weitere Einzelheiten finden Sie unter mdn-border-style

Mit den nativen CSS-Eigenschaften lässt sich zwar der gepunktete Linieneffekt erzielen, es ist jedoch nicht einfach, eine darauf basierende Animation zu implementieren. Dies kann jedoch durch die Verwendung anderer CSS-Eigenschaften erreicht werden.

Beispiel:

 <div class="container">Ameisenlinie</div>

 .container {
  Breite: 100px;
  Höhe: 100px;
  Polsterung: 5px;
  Rand: 1px durchgehend transparent;
  Hintergrund: linearer Farbverlauf (weiß, weiß) Polsterbox,
    sich wiederholender linearer Farbverlauf (-45 Grad, Schwarz 0, Schwarz, 25 %, transparent 0, transparent 50 %) 0 % 0 % / 0,6em 0,6em;
  Animation: Ameisen 10s linear unendlich;
}

@keyframes Ameisen {
  Zu {
    Hintergrundposition: 100 % 100 %;
  }
} 

Damit schließen wir den Artikel zur Verwendung von Gojs zur Implementierung von Ameisenlinien-Animationseffekten ab. Ich hoffe, dass es für jedermanns Studium hilfreich sein wird, und ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.