GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖，且極大地簡化您的JavaScript / Canvas 程序。

點擊下載GoJS最新試用版

動畫類

（2.1版本的新功能）

通過創建Animation類的一個或多個實例，可以對GraphObject和Diagram屬性進行常規動畫處理。

var animation = new go.Animation();
// Animate the node's angle from its current value to a random value between 0 and 150 degrees
animation.add(node, "angle", node.angle, Math.random() * 150);
animation.duration = 1000; // Animate over 1 second, instead of the default 600 milliseconds
animation.start(); // starts the animation immediately

  animation.add(GraphObjectOrDiagram, "EffectName", StartingValue, EndingValue);

// define a simple Node template
diagram.nodeTemplate =
  $(go.Node, "Spot",
    { locationSpot: go.Spot.Center },
    new go.Binding("angle"),
    $(go.Shape, "Diamond", { strokeWidth: 0, width: 75, height: 75 },
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 8, font: 'bold 12pt sans-serif' },
      new go.Binding("text", "key"))
  );

diagram.model = new go.GraphLinksModel(
  [
    { key: "Alpha", color: "lightblue" },
    { key: "Beta", color: "orange" },
    { key: "Gamma", group: 'G1',  color: "lightgreen" },
    { key: "Delta", group: 'G1',  color: "pink", angle: 45 }
  ],
  [
    { from: "Alpha", to: "Beta" },
    { from: "Gamma", to: "Delta" }
  ]);

window.animate1 = function() {
  var animation = new go.Animation();
  diagram.nodes.each(function(node) {
    // Animate the node's angle from its current value to a random value between 0 and 150 degrees
    animation.add(node, "angle", node.angle, Math.random() * 150);
  });
  animation.duration = 1000; // Animate over 1 second, instead of the default 600 milliseconds
  animation.start(); // starts the animation immediately
}

通過將圖作為要動畫的對象傳遞，可以使圖動畫化：

  animation.add(myDiagram, "position", myDiagram.position, myDiagram.position.copy().offset(200, 15));
  ...
  animation.add(myDiagram, "scale", myDiagram.scale, 0.2);

以下是幾個示例動畫，所有動畫都將Animation.reversible設置為true。 第一個為Nodes設置動畫，其他三個為Diagram的位置和比例設置動畫。

    // define a simple Node template
    diagram.nodeTemplate =
      $(go.Node, "Spot",
        { locationSpot: go.Spot.Center },
        new go.Binding("angle"),
        $(go.Shape, "Diamond", { strokeWidth: 0, width: 75, height: 75 },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8, font: 'bold 12pt sans-serif' },
          new go.Binding("text", "key"))
      );

    diagram.model = new go.GraphLinksModel(
    [
      { key: "Alpha", color: "lightblue" },
      { key: "Beta", color: "orange" },
      { key: "Gamma", group: 'G1',  color: "lightgreen" },
      { key: "Delta", group: 'G1',  color: "pink" }
    ],
    [
      { from: "Alpha", to: "Beta" },
      { from: "Gamma", to: "Delta" }
    ]);

    function protectedAnimation(f) {  // return a button event handler to start an animation
      return function() {
        // Stop any currently running animations
        diagram.animationManager.stopAnimation(true);

        var animation = new go.Animation();
        animation.reversible = true; // reverse the animation at the end, doubling its total time
        f(animation);  // initialize the Animation
        animation.start(); // start the animation immediately
      };
    }

    window.animateAngleReverse =
      protectedAnimation(function(animation) {
        diagram.nodes.each(function(node) {
          // Animate the node's angle from its current value a random value between 0 and 90
          animation.add(node, "angle", node.angle, Math.random() * 90);
        });
      });

    window.animateDiagramPosition =
      protectedAnimation(function(animation) {
        // shift the diagram contents towards the right and then back
        animation.add(diagram, "position", diagram.position, diagram.position.copy().offset(200, 15));
        animation.duration = 700;
      });

    window.animateZoomOut =
      protectedAnimation(function(animation) {
        animation.add(diagram, "scale", diagram.scale, 0.2);
      });

    window.animateZoomIn =
      protectedAnimation(function(animation) {
        animation.add(diagram, "scale", diagram.scale, 4);
      });

如果沒有調用AnimationManager.stopAnimation來防止快速單擊按鈕，您會注意到，如果單擊“縮小”，然后在動畫過程中再次單擊相同的按鈕，則圖的比例將不會返回到其初始值1.0。 這是因為“動畫”會從當前“圖”比例值進行動畫設置，直到最終值，然后再返回，但是由于正在進行的動畫，當前值也正在更改。

自定義動畫效果

在動畫過程中添加自定義方式來修改一個或多個屬性有時會很有幫助。 您可以使用AnimationManager.defineAnimationEffect注冊新的動畫效果。 傳遞的名稱是任意字符串，但通常反映GraphObject類的屬性。 傳遞的函數的主體確定要設置動畫的一個或多個屬性。

這是一個示例，創建一個“分數”動畫效果以動畫GraphObject.segmentFraction的值，這將使Link標簽沿其路徑移動。

// This presumes the object to be animated is a label within a Link
go.AnimationManager.defineAnimationEffect('fraction',
function(obj, startValue, endValue, easing, currentTime, duration, animation) {
  obj.segmentFraction = easing(currentTime, startValue, endValue - startValue, duration);
});

  function animateColorAndFraction() {
    // create one Animation for each link, so that they have independent durations
    myDiagram.links.each(function(node) {
      var animation = new go.Animation()
      animation.add(node.elt(1), "fill", node.elt(0).fill, go.Brush.randomColor());
      animation.add(node.elt(1), "fraction", 0, 1);
      animation.duration = 1000 + (Math.random()*2000);
      animation.reversible = true; // Re-run backwards
      animation.runCount = Infinity; // Animate forever
      animation.start();
    });
  }

由于Animation.runCount設置為Infinity，因此此Animation將無限期運行。

動畫刪除

可以對要刪除的零件進行動畫處理，但是由于刪除后它們將不再存在于圖表中，因此必須將副本添加到“動畫”中，以便可以進行動畫處理。 這可以通過Animation.addTemporaryPart來完成。 然后可以使用Animation.add將零件的刪除動畫化。 該臨時部分將成為動畫對象，并在動畫開始時自動顯示，并在動畫完成時將其刪除。 刪除動畫通常會縮小模擬零件，將其移出屏幕，將其不透明度降低到零，或者顯示它以某種方式消失。

在此示例中，將刪除的每個零件都將縮放到不可察覺的大小（通過將動畫比例縮放為0.01）并旋轉（通過動畫角度），以呈現回旋的外觀。 “自定義動畫”擴展示例中還有其他示例刪除（和創建）效果。

myDiagram.addDiagramListener('SelectionDeleting', function(e) {
  // the DiagramEvent.subject is the collection of Parts about to be deleted
  e.subject.each(function(part) {
    if (!(part instanceof go.Node)) return; // only animate Nodes
    var animation = new go.Animation();
    var deletePart = part.copy();
    animation.add(deletePart, "scale", deletePart.scale, 0.01);
    animation.add(deletePart, "angle", deletePart.angle, 360);
    animation.addTemporaryPart(deletePart, myDiagram);
    animation.start();
  });
});

動畫實例

要查看更多自定義動畫示例，請繼續關注我們后續推出的文章教程

====================================================

想要購買GoJS正版授權的朋友可以

有關產品的最新消息和最新資訊，歡迎掃描關注下方微信公眾號