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

默認(rèn)動畫

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

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

由CommandHandler調(diào)用：

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

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

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

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

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

通過圖調(diào)用：

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

• “模型”-設(shè)置新模型時，對所有節(jié)點位置進(jìn)行動畫處理。

• “布局”-對布局上所有更改的節(jié)點位置進(jìn)行動畫處理。

由AnimationTrigger調(diào)用，如果已聲明：

• “觸發(fā)器”（Trigger）-對定義的GraphObject屬性的更改進(jìn)行動畫處理。

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

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

這是一個帶有按鈕的示例，這些按鈕將AnimationManager.initialAnimationStyle設(shè)置為三個不同的值，然后重新加載該圖。第四個按鈕說明了如何使用"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可以通過設(shè)置來關(guān)閉AnimationManager.isEnabled來false。可以通過重寫AnimationManager.canStart來關(guān)閉特定的默認(rèn)動畫，或者查詢動畫即將開始的原因（AnimationManager.animationReasons），然后可能返回false。

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

可動畫屬性

默認(rèn)情況下，AnimationTriggers和Animation可以為GraphObjects的以下屬性設(shè)置動畫：

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

AnimationTrigger類

（2.1版本的新功能）

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

// 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可以立即調(diào)用動畫，以已修改的每個GraphObject的每個屬性開始一個新動畫，也可以（更有效地）將它們捆綁到默認(rèn)動畫（AnimationManager.defaultAnimation）中，并在下一個動畫結(jié)束時開始交易。可以使用AnimationTrigger.startCondition分別通過值 AnimationTrigger，Immediate和AnimationTrigger，Bundled設(shè)置這些行為。默認(rèn)值A(chǔ)nimationTrigger，Default嘗試推斷最佳值。如果沒有正在進(jìn)行的事務(wù)或Diagram.skipsUndoManager為true ，它將立即開始。

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

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

想要購買GoJS正版授權(quán)的朋友可以咨詢慧都官方客服

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