Gojs がアリのラインアニメーション効果を実装

<!-- コンテナ -->
<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 ダイアグラム = $(go.Diagram, 'myDiagramDiv');

// ノード テンプレート。各ノードの構築方法を記述します。diagram.nodeTemplate = $(go.Node, "Auto", // ボックスはテキストに自動的に適応します。$(go.Shape, "RoundedRectangle", new go.Binding("fill", "color")),
  $(go.TextBlock、{margin: 5}、新しいgo.Binding("text", "name"))
);

// ノードとリンク情報を記述するモデルを定義します。diagram.model = new go.GraphLinksModel(
  [ // ノード { キー: 'shanghai'、 名前: "出発地 上海"、 色: "lightblue" },
    { キー: '江蘇省'、名前: "江蘇省"、色: "ピンク" },
    { キー: 'anhui'、名前: "Anhui"、色: "pink" },
    { キー: '山東'、名前: "山東"、色: "オレンジ"},
    { キー: '河北省'、名前: "河北省を通過"、色: "オレンジ" }、
    { キー: 'tianjin'、名前: "Tianjin via"、色: "orange" }、
    { キー: '北京'、名前: "目的地北京"、色: "ライトグリーン" }
  ]、
  [ // 接続 { from: "上海", to: "江蘇" },
    { 発信元: "江蘇省", 宛先: "安徽省" },
    { 発信元: "安徽省", 宛先: "山東省" },
    { 発信元: "山東省", 宛先: "河北省" },
    { 発信元: "河北省", 宛先: "天津市" },
    { 発信元: 「天津」、宛先: 「北京」 }
  ]
);

// 実線と点線のテンプレートを格納するコレクションを定義します。const templmap = new go.Map()
定数カラー = '#000'

//デフォルトの接続テンプレート const defaultTemplate = $(
  go.Link、
  $(go.Shape, { ストローク: 色, ストローク幅: 1 }),
  $(go.Shape, { toArrow: 'Standard', 塗りつぶし: 色, ストローク: 色, ストローク幅: 1 })
）

// 破線テンプレート、キー属性:strokeDashArray: [6, 3]
定数破線テンプレート = $(
  go.Link、
  // name: 'dashedLink'、後でアニメーションで使用されます $(go.Shape, { name: 'dashedLink',stroke: color,strokeWidth: 1,strokeDashArray: [6, 3] }),
  $(go.Shape, { toArrow: 'Standard', 塗りつぶし: 色, ストローク: 色, ストローク幅: 1 })
）

templmap.add(''、デフォルトテンプレート)
// dashed は名前で、説明は属性カテゴリを使用して指定されます: 'dashed' templmap.add('dashed', dashedTemplate)

diagram.linkTemplateMap = テンプレートマップ

 { from: "anhui", to: "shandong", カテゴリ: 'dashed' },

関数アニメーション（）{
  定数アニメーション = 新しい go.Animation();
  // 点線アニメーション diagram.links.each((link) => {
    const dashedLink = link.findObject("dashedLink");
    if (破線リンク) {
      アニメーション.add(dashedLink, "strokeDashOffset", 10, 0)
    }
  });

  アニメーションのイージングを Go のアニメーションに反映します。
  // 無期限に実行
  アニメーションの実行回数を無限大にする
  アニメーションを開始します。
}
アニメーション（）

関数アニメーション（）{
  定数ループ = () => {
    アニメーションタイマー = setTimeout(() => {
      const oldskips = diagram.skipsUndoManager;
      diagram.skipsUndoManager = true;
      // 点線アニメーション diagram.links.each((link) => {
        const dashedLinkShape = link.findObject("dashedLink");
        if (破線リンクシェイプ) {
          定数 off = dashedLinkShape.strokeDashOffset - 3;
          // ストロークアニメーションを設定（移動） dashedLinkShape.strokeDashOffset = (off <= 0) ? 60 : off;
        }
      });

      diagram.skipsUndoManager = oldskips;
      ループ（）;
    }, 180);
  }
  ループ（）
}
アニメーション（）

関数drawDashedLine(パターン) {
  ctx.beginPath();
  ctx.setLineDash(パターン);
  ctx.moveTo(0, y);
  ctx.lineTo(300, y);
  ctx.stroke();
  y + = 20;
}

定数キャンバス = document.getElementById('キャンバス');
const ctx = canvas.getContext('2d');
y = 15とします。

破線を描画します([]);
破線を描画します([1, 1]);
破線を描画します([10, 10]);
破線を描画します([20, 5]);
破線を描画します([15, 3, 3, 3]);
破線を描画します([20, 3, 3, 3, 3, 3, 3, 3]);
drawDashedLine([12, 3, 3]); // [12, 3, 3, 12, 3, 3] に等しい

 var キャンバス = document.getElementById("キャンバス");
var ctx = canvas.getContext("2d");
var オフセット = 0;

関数draw() {
  ctx.clearRect(0,0, キャンバスの幅、キャンバスの高さ);
  ctx.setLineDash([4, 2]);
  ctx.lineDashOffset = -オフセット;
  ctx.strokeRect(10,10, 100, 100);
}

関数行進() {
  オフセット++;
  （オフセット＞16）の場合{
    オフセット = 0;
  }
  描く（）;
  setTimeout(3月20日);
}

行進（）;

 <div class="container">アリの列</div>

 。容器 {
  幅: 100ピクセル;
  高さ: 100px;
  パディング: 5px;
  境界線: 1px 透明の実線;
  背景: 線形グラデーション(白、白) パディングボックス、
    繰り返し線形グラデーション(-45度、黒0、黒、25%、透明0、透明50%) 0% 0% / 0.6em 0.6em;
  アニメーション: アリ 10 秒 線形 無限;
}

@keyframes アリ {
  に {
    背景位置: 100% 100%;
  }
}