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

---

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

点击下载GoJS最新试用版

动画类

（2.1版本的新功能）

通过创建Animation类的一个或多个实例，可以对GraphObject和Diagram属性进行常规动画处理。

var animation = new go.Animation();
// Animate the node's angle from its current value to a random value between 0 and 150 degrees
animation.add(node, "angle", node.angle, Math.random() * 150);
animation.duration = 1000; // Animate over 1 second, instead of the default 600 milliseconds
animation.start(); // starts the animation immediately

Animation.add用于指定应设置动画的对象，哪些属性以及它们的开始和结束值：

  animation.add(GraphObjectOrDiagram, "EffectName", StartingValue, EndingValue);

这是上述示例中的动画，其中每个节点均由HTML按钮设置动画。 请注意，每个节点都被添加到同一动画中。 每个节点使用一个动画会获得相同的效果，但如果可能的话，将要设置动画的属性分组为单个动画总是更有效的（例如，有可能它们都同时开始） 并具有相同的持续时间）。

// define a simple Node template
diagram.nodeTemplate =
  $(go.Node, "Spot",
    { locationSpot: go.Spot.Center },
    new go.Binding("angle"),
    $(go.Shape, "Diamond", { strokeWidth: 0, width: 75, height: 75 },
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 8, font: 'bold 12pt sans-serif' },
      new go.Binding("text", "key"))
  );

diagram.model = new go.GraphLinksModel(
  [
    { key: "Alpha", color: "lightblue" },
    { key: "Beta", color: "orange" },
    { key: "Gamma", group: 'G1',  color: "lightgreen" },
    { key: "Delta", group: 'G1',  color: "pink", angle: 45 }
  ],
  [
    { from: "Alpha", to: "Beta" },
    { from: "Gamma", to: "Delta" }
  ]);

window.animate1 = function() {
  var animation = new go.Animation();
  diagram.nodes.each(function(node) {
    // Animate the node's angle from its current value to a random value between 0 and 150 degrees
    animation.add(node, "angle", node.angle, Math.random() * 150);
  });
  animation.duration = 1000; // Animate over 1 second, instead of the default 600 milliseconds
  animation.start(); // starts the animation immediately
}

通过将图作为要动画的对象传递，可以使图动画化：

  animation.add(myDiagram, "position", myDiagram.position, myDiagram.position.copy().offset(200, 15));
  ...
  animation.add(myDiagram, "scale", myDiagram.scale, 0.2);

通过将Animation.reversible设置为true，动画也可以颠倒，这在本质上是精美的动画中很常见。 这会使动画的有效持续时间翻倍。

以下是几个示例动画，所有动画都将Animation.reversible设置为true。 第一个为Nodes设置动画，其他三个为Diagram的位置和比例设置动画。

    // define a simple Node template
    diagram.nodeTemplate =
      $(go.Node, "Spot",
        { locationSpot: go.Spot.Center },
        new go.Binding("angle"),
        $(go.Shape, "Diamond", { strokeWidth: 0, width: 75, height: 75 },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8, font: 'bold 12pt sans-serif' },
          new go.Binding("text", "key"))
      );

    diagram.model = new go.GraphLinksModel(
    [
      { key: "Alpha", color: "lightblue" },
      { key: "Beta", color: "orange" },
      { key: "Gamma", group: 'G1',  color: "lightgreen" },
      { key: "Delta", group: 'G1',  color: "pink" }
    ],
    [
      { from: "Alpha", to: "Beta" },
      { from: "Gamma", to: "Delta" }
    ]);

    function protectedAnimation(f) {  // return a button event handler to start an animation
      return function() {
        // Stop any currently running animations
        diagram.animationManager.stopAnimation(true);

        var animation = new go.Animation();
        animation.reversible = true; // reverse the animation at the end, doubling its total time
        f(animation);  // initialize the Animation
        animation.start(); // start the animation immediately
      };
    }

    window.animateAngleReverse =
      protectedAnimation(function(animation) {
        diagram.nodes.each(function(node) {
          // Animate the node's angle from its current value a random value between 0 and 90
          animation.add(node, "angle", node.angle, Math.random() * 90);
        });
      });

    window.animateDiagramPosition =
      protectedAnimation(function(animation) {
        // shift the diagram contents towards the right and then back
        animation.add(diagram, "position", diagram.position, diagram.position.copy().offset(200, 15));
        animation.duration = 700;
      });

    window.animateZoomOut =
      protectedAnimation(function(animation) {
        animation.add(diagram, "scale", diagram.scale, 0.2);
      });

    window.animateZoomIn =
      protectedAnimation(function(animation) {
        animation.add(diagram, "scale", diagram.scale, 4);
      });

如果没有调用AnimationManager.stopAnimation来防止快速单击按钮，您会注意到，如果单击“缩小”，然后在动画过程中再次单击相同的按钮，则图的比例将不会返回到其初始值1.0。 这是因为“动画”会从当前“图”比例值进行动画设置，直到最终值，然后再返回，但是由于正在进行的动画，当前值也正在更改。

自定义动画效果

在动画过程中添加自定义方式来修改一个或多个属性有时会很有帮助。 您可以使用AnimationManager.defineAnimationEffect注册新的动画效果。 传递的名称是任意字符串，但通常反映GraphObject类的属性。 传递的函数的主体确定要设置动画的一个或多个属性。

这是一个示例，创建一个“分数”动画效果以动画GraphObject.segmentFraction的值，这将使Link标签沿其路径移动。

// This presumes the object to be animated is a label within a Link
go.AnimationManager.defineAnimationEffect('fraction',
function(obj, startValue, endValue, easing, currentTime, duration, animation) {
  obj.segmentFraction = easing(currentTime, startValue, endValue - startValue, duration);
});

定义此属性后，我们可以将其用作Animation中的属性名称。 以下示例设置了一个不确定的（Animation.runCount = Infinity）可逆动画，其中为每个链接分配了一个随机持续时间，以循环其标签的填充颜色和segmentFraction。 这样产生的标签看上去会在其脉动的同时沿其路径移动。 Animation.reversible的设置使它们一旦完成就向后退，从头开始。

  function animateColorAndFraction() {
    // create one Animation for each link, so that they have independent durations
    myDiagram.links.each(function(node) {
      var animation = new go.Animation()
      animation.add(node.elt(1), "fill", node.elt(0).fill, go.Brush.randomColor());
      animation.add(node.elt(1), "fraction", 0, 1);
      animation.duration = 1000 + (Math.random()*2000);
      animation.reversible = true; // Re-run backwards
      animation.runCount = Infinity; // Animate forever
      animation.start();
    });
  }

由于Animation.runCount设置为Infinity，因此此Animation将无限期运行。

动画删除

可以对要删除的零件进行动画处理，但是由于删除后它们将不再存在于图表中，因此必须将副本添加到“动画”中，以便可以进行动画处理。 这可以通过Animation.addTemporaryPart来完成。 然后可以使用Animation.add将零件的删除动画化。 该临时部分将成为动画对象，并在动画开始时自动显示，并在动画完成时将其删除。 删除动画通常会缩小模拟零件，将其移出屏幕，将其不透明度降低到零，或者显示它以某种方式消失。

在此示例中，将删除的每个零件都将缩放到不可察觉的大小（通过将动画比例缩放为0.01）并旋转（通过动画角度），以呈现回旋的外观。 “自定义动画”扩展示例中还有其他示例删除（和创建）效果。

myDiagram.addDiagramListener('SelectionDeleting', function(e) {
  // the DiagramEvent.subject is the collection of Parts about to be deleted
  e.subject.each(function(part) {
    if (!(part instanceof go.Node)) return; // only animate Nodes
    var animation = new go.Animation();
    var deletePart = part.copy();
    animation.add(deletePart, "scale", deletePart.scale, 0.01);
    animation.add(deletePart, "angle", deletePart.angle, 360);
    animation.addTemporaryPart(deletePart, myDiagram);
    animation.start();
  });
});

动画实例

要查看更多自定义动画示例，请继续关注我们后续推出的文章教程

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

想要购买GoJS正版授权的朋友可以

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