流程圖控件GoJS教程：GoJS動畫（下）

---

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用于指定應設置動畫的對象，哪些屬性以及它們的開始和結束值：

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

這是上述示例中的動畫，其中每個節點均由HTML按鈕設置動畫。 請注意，每個節點都被添加到同一動畫中。 每個節點使用一個動畫會獲得相同的效果，但如果可能的話，將要設置動畫的屬性分組為單個動畫總是更有效的（例如，有可能它們都同時開始） 并具有相同的持續時間）。

// 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，動畫也可以顛倒，這在本質上是精美的動畫中很常見。 這會使動畫的有效持續時間翻倍。

以下是幾個示例動畫，所有動畫都將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);
});

定義此屬性后，我們可以將其用作Animation中的屬性名稱。 以下示例設置了一個不確定的（Animation.runCount = Infinity）可逆動畫，其中為每個鏈接分配了一個隨機持續時間，以循環其標簽的填充顏色和segmentFraction。 這樣產生的標簽看上去會在其脈動的同時沿其路徑移動。 Animation.reversible的設置使它們一旦完成就向后退，從頭開始。

  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正版授權的朋友可以

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