默认动画

默认情况下，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正版授权的朋友可以

有关产品的最新消息和最新资讯，欢迎扫描关注下方微信公众号