默認動畫

 默認情況下，AnimationManager創建并運行使用動畫的單一實例的框圖幾個動畫AnimationManager.defaultAnimation。這些動畫通過Diagram.model setter和布局在各種命令上發生。與其他動畫不同，如果在動畫過程中開始新事務，它們將被停止。

出于以下原因，GoJS將自動開始動畫制作：

由CommandHandler調用：

• “折疊子圖”（Collapse SubGraph）-通過“消失”動畫使折疊的節點動畫化，將其比例和位置動畫化。

• “擴展子圖”（Expand SubGraph）-通過設置在折疊組中開始的節點的比例和位置的動畫來擴展組。

• “折疊樹”（Collapse Tree）-通過使消失的節點“消失”來動畫化它們，將其比例和位置動畫化到根節點中。

• “擴展樹”（Expand Tree）-通過對從折疊的根節點開始的后代節點的比例和位置進行動畫處理來擴展子樹。

• “滾動到零件”（Scroll To Part）-對Diagram.position進行動畫處理，并可以擴展組或展開子樹以使節點可見。

通過圖調用：

• “縮放以適合”-動畫Diagram.position和Diagram.scale。

• “模型”-設置新模型時，對所有節點位置進行動畫處理。

• “布局”-對布局上所有更改的節點位置進行動畫處理。

由AnimationTrigger調用，如果已聲明：

• “觸發器”（Trigger）-對定義的GraphObject屬性的更改進行動畫處理。

 上面引用的名稱是AnimationManager.animationReasons集中的字符串。

 從GoJS 2.1開始，默認的初始動畫使圖表逐漸淡入視圖。先前版本分別為零件位置設置動畫。為了控制初始動畫行為，現在存在AnimationManager.initialAnimationStyle，默認 情況下將其設置為AnimationManager，Default，但可以將其設置為AnimationManager，AnimateLocations以使用GoJS 2.0中的動畫樣式。您也可以將此屬性設置為AnimationManager，None，并使用"InitialAnimationStarting" DiagramEvent定義自己的初始動畫。

 這是一個帶有按鈕的示例，這些按鈕將AnimationManager.initialAnimationStyle設置為三個不同的值，然后重新加載該圖。第四個按鈕說明了如何使用"InitialAnimationStarting" DiagramEvent制作自定義的“放大”動畫。

    diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle", { strokeWidth: 0, fill: "lightblue" }),
      $(go.TextBlock,
        { margin: 8, font: "bold 14px sans-serif", stroke: '#333' },
        new go.Binding("text", "key"))
    );
    diagram.model = new go.GraphLinksModel([{ key: 'Alpha' }, { key: 'Beta' }, { key: 'Delta' }, { key: 'Gamma' }]);

    // only needed for this demonstration, this flag is used to stop
    // the "InitialAnimationStarting" listener when other buttons are pressed
    window.custom = false;

    window.animateDefault = function() {
      window.custom = false;
      diagram.animationManager.initialAnimationStyle = go.AnimationManager.Default;
      diagram.model = go.Model.fromJSON(diagram.model.toJSON());
    }
    window.animateLocations = function() {
      window.custom = false;
      diagram.animationManager.initialAnimationStyle = go.AnimationManager.AnimateLocations;
      diagram.model = go.Model.fromJSON(diagram.model.toJSON());
    }
    window.animateNone = function() {
      window.custom = false;
      diagram.animationManager.initialAnimationStyle = go.AnimationManager.None;
      diagram.model = go.Model.fromJSON(diagram.model.toJSON());
    }
    window.animateCustom = function() {
      window.custom = true;
      diagram.animationManager.initialAnimationStyle = go.AnimationManager.None;
      // Customer listener zooms-in the Diagram on load:
      diagram.addDiagramListener("InitialAnimationStarting", function(e) {
        var animation = e.subject.defaultAnimation;
        if (window.custom === false) {
          // a different button was pressed, restore default values on the default animation:
          animation.easing = go.Animation.EaseInOutQuad;
          animation.duration = NaN;
          return;
        }
        animation.easing = go.Animation.EaseOutExpo;
        animation.duration = 1500;
        animation.add(e.diagram, 'scale', 0.1, 1);
        animation.add(e.diagram, 'opacity', 0, 1);
      })
      diagram.model = go.Model.fromJSON(diagram.model.toJSON());
    }

 該AnimationManager可以通過設置來關閉AnimationManager.isEnabled來false。可以通過重寫AnimationManager.canStart來關閉特定的默認動畫，或者查詢動畫即將開始的原因（AnimationManager.animationReasons），然后可能返回false。

 如果在動畫過程中開始新的事務，則默認動畫將停止。對于其他Animation而言，情況并非如此，它們不會被新事務停止，并且可以無限期地繼續。

可動畫屬性

 默認情況下，AnimationTriggers和Animation可以為GraphObjects的以下屬性設置動畫：

• position
• location （在零件上）
• scale
• opacity
• angle
• desiredSize
• width
• height
• background （僅適用于純色字符串）
• areaBackground （僅適用于純色字符串）
• fill （在“形狀”上，僅適用于純色字符串）
• strokeWidth （關于形狀）
• strokeDashOffset （關于形狀）
• stroke （在Shapes，TextBlocks上，僅適用于純色字符串）

AnimationTrigger類

（2.1版本的新功能）

 一個AnimationTrigger用于當其值已更改為GraphObject性質申報動畫。定義觸發器后，對目標屬性的更改將從舊值動畫化為新值。在模板中，觸發器的定義方式與綁定類似：

// In this shape definition, two triggers are defined on a Shape.
// These will cause all changes to Shape.stroke and Shape.fill to animate
// from their old values to their new values.
$(go.Shape, "Rectangle",
  { strokeWidth: 12, stroke: 'black', fill: 'white' },
  new go.AnimationTrigger('stroke'),
  new go.AnimationTrigger('fill')
)

diagram.nodeTemplate =
  $(go.Node,
    $(go.Shape, "Rectangle",
      { strokeWidth: 12, stroke: 'black', fill: 'white' },
      new go.AnimationTrigger('stroke'),
      new go.AnimationTrigger('fill')
    )
  );

diagram.model = new go.GraphLinksModel([{ key: 'Alpha' }]); // One node

// attach this Diagram to the window to use a button
window.animateTrigger1 = function() {
  diagram.commit(function(diag) {
    var node = diag.nodes.first();
    node.elt(0).stroke = go.Brush.randomColor();
    node.elt(0).fill = go.Brush.randomColor();
  });
}

 AnimationTriggers可以立即調用動畫，以已修改的每個GraphObject的每個屬性開始一個新動畫，也可以（更有效地）將它們捆綁到默認動畫（AnimationManager.defaultAnimation）中，并在下一個動畫結束時開始交易。可以使用AnimationTrigger.startCondition分別通過值 AnimationTrigger，Immediate和AnimationTrigger，Bundled設置這些行為。默認值AnimationTrigger，Default嘗試推斷最佳值。如果沒有正在進行的事務或Diagram.skipsUndoManager為true ，它將立即開始。

 AnimationTriggers僅在GraphObjects的模板中定義，而不能在RowColumnDefinitions或Diagrams上使用。

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

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

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