流程圖控件GoJS教程：GoJS動(dòng)畫（下）

---

GoJS是一款功能強(qiáng)大，快速且輕量級(jí)的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡(jiǎn)化您的JavaScript / Canvas 程序。

點(diǎn)擊下載GoJS最新試用版

動(dòng)畫類

（2.1版本的新功能）

通過創(chuàng)建Animation類的一個(gè)或多個(gè)實(shí)例，可以對(duì)GraphObject和Diagram屬性進(jìn)行常規(guī)動(dòng)畫處理。

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用于指定應(yīng)設(shè)置動(dòng)畫的對(duì)象，哪些屬性以及它們的開始和結(jié)束值：

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

這是上述示例中的動(dòng)畫，其中每個(gè)節(jié)點(diǎn)均由HTML按鈕設(shè)置動(dòng)畫。 請(qǐng)注意，每個(gè)節(jié)點(diǎn)都被添加到同一動(dòng)畫中。 每個(gè)節(jié)點(diǎn)使用一個(gè)動(dòng)畫會(huì)獲得相同的效果，但如果可能的話，將要設(shè)置動(dòng)畫的屬性分組為單個(gè)動(dòng)畫總是更有效的（例如，有可能它們都同時(shí)開始） 并具有相同的持續(xù)時(shí)間）。

// 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
}

通過將圖作為要?jiǎng)赢嫷膶?duì)象傳遞，可以使圖動(dòng)畫化：

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

通過將Animation.reversible設(shè)置為true，動(dòng)畫也可以顛倒，這在本質(zhì)上是精美的動(dòng)畫中很常見。 這會(huì)使動(dòng)畫的有效持續(xù)時(shí)間翻倍。

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

    // 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);
      });

如果沒有調(diào)用AnimationManager.stopAnimation來防止快速單擊按鈕，您會(huì)注意到，如果單擊“縮小”，然后在動(dòng)畫過程中再次單擊相同的按鈕，則圖的比例將不會(huì)返回到其初始值1.0。 這是因?yàn)椤皠?dòng)畫”會(huì)從當(dāng)前“圖”比例值進(jìn)行動(dòng)畫設(shè)置，直到最終值，然后再返回，但是由于正在進(jìn)行的動(dòng)畫，當(dāng)前值也正在更改。

自定義動(dòng)畫效果

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

這是一個(gè)示例，創(chuàng)建一個(gè)“分?jǐn)?shù)”動(dòng)畫效果以動(dòng)畫GraphObject.segmentFraction的值，這將使Link標(biāo)簽沿其路徑移動(dòng)。

// 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中的屬性名稱。 以下示例設(shè)置了一個(gè)不確定的（Animation.runCount = Infinity）可逆動(dòng)畫，其中為每個(gè)鏈接分配了一個(gè)隨機(jī)持續(xù)時(shí)間，以循環(huán)其標(biāo)簽的填充顏色和segmentFraction。 這樣產(chǎn)生的標(biāo)簽看上去會(huì)在其脈動(dòng)的同時(shí)沿其路徑移動(dòng)。 Animation.reversible的設(shè)置使它們一旦完成就向后退，從頭開始。

  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設(shè)置為Infinity，因此此Animation將無限期運(yùn)行。

動(dòng)畫刪除

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

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

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();
  });
});

動(dòng)畫實(shí)例

要查看更多自定義動(dòng)畫示例，請(qǐng)繼續(xù)關(guān)注我們后續(xù)推出的文章教程

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

想要購(gòu)買GoJS正版授權(quán)的朋友可以

有關(guān)產(chǎn)品的最新消息和最新資訊，歡迎掃描關(guān)注下方微信公眾號(hào)