默認(rèn)動(dòng)畫(huà)

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

出于以下原因，GoJS將自動(dòng)開(kāi)始動(dòng)畫(huà)制作：

由CommandHandler調(diào)用：

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

• “擴(kuò)展子圖”（Expand SubGraph）-通過(guò)設(shè)置在折疊組中開(kāi)始的節(jié)點(diǎn)的比例和位置的動(dòng)畫(huà)來(lái)擴(kuò)展組。

• “折疊樹(shù)”（Collapse Tree）-通過(guò)使消失的節(jié)點(diǎn)“消失”來(lái)動(dòng)畫(huà)化它們，將其比例和位置動(dòng)畫(huà)化到根節(jié)點(diǎn)中。

• “擴(kuò)展樹(shù)”（Expand Tree）-通過(guò)對(duì)從折疊的根節(jié)點(diǎn)開(kāi)始的后代節(jié)點(diǎn)的比例和位置進(jìn)行動(dòng)畫(huà)處理來(lái)擴(kuò)展子樹(shù)。

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

通過(guò)圖調(diào)用：

• “縮放以適合”-動(dòng)畫(huà)Diagram.position和Diagram.scale。

• “模型”-設(shè)置新模型時(shí)，對(duì)所有節(jié)點(diǎn)位置進(jìn)行動(dòng)畫(huà)處理。

• “布局”-對(duì)布局上所有更改的節(jié)點(diǎn)位置進(jìn)行動(dòng)畫(huà)處理。

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

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

上面引用的名稱(chēng)是AnimationManager.animationReasons集中的字符串。

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

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

    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可以通過(guò)設(shè)置來(lái)關(guān)閉AnimationManager.isEnabled來(lái)false。可以通過(guò)重寫(xiě)AnimationManager.canStart來(lái)關(guān)閉特定的默認(rèn)動(dòng)畫(huà)，或者查詢(xún)動(dòng)畫(huà)即將開(kāi)始的原因（AnimationManager.animationReasons），然后可能返回false。

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

可動(dòng)畫(huà)屬性

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

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

AnimationTrigger類(lèi)

（2.1版本的新功能）

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

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

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

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

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

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