流程图控件GoJS教程：GoJS动画（上）

GoJS提供了几种内置动画（默认情况下启用）以及创建任意动画的功能。

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

GoJS最新试用版

GoJS提供了几种内置动画（默认情况下启用）以及创建任意动画的功能。

该Diagram.animationManager处理一中的动画图。该AnimationManager自动设置和调度默认的动画，并具有属性来定制和禁用它们。通过创建Animation或AnimationTrigger的实例，可以自定义动画。

简介页面详细介绍了用于GoJS动画的不同类。

要查看自定义动画的更多演示，请访问“ 自定义动画”扩展示例。

默认动画

默认情况下，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());    }

另外，Animation（但不是AnimationTriggers）可以为Diagram的以下属性设置动画：

• position
• scale
• opacity

如果其他属性是由程序员定义的，则可以设置其动画效果-请参见下面的“自定义动画效果”部分。

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'))

下面是一个例子，一个HTML按钮，它将图形的stroke和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 buttonwindow.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正版授权的朋友可以咨询官方客服

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

标签：

来源：慧都