彩票走势图

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(GraphObjectOrDiagram, "EffectName", StartingValue, EndingValue);

// 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。 第一个为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);
});

  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正版授权的朋友可以

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