GoJs中的动画使用示例详解

简介

GoJs是一个JavaScript库，专门用于创建交互式图形和图表。它提供了许多有用的功能，包括：绘图、布局、事件处理、数据绑定等。

使用GoJs时，我们通常需要在图形上添加一些交互效果，以提高用户体验。其中，动画效果是最常使用的一种。

本文将详细讲解GoJs中的动画效果及其使用方式，包括两个具体的示例说明。

示例一：节点的变色动画

我们先来看一个简单的示例，该示例演示了如何实现一个节点的变色动画。

首先，我们需要定义一个节点模板，用于显示节点的外观和数据。这里简单定义一个圆形节点：

myDiagram.nodeTemplate =
  $(go.Node, "Spot",
    $(go.Shape, "Circle", { fill: "lightgray", stroke: "black", strokeWidth: 1 }),
    $(go.TextBlock, { margin: 5 }, new go.Binding("text", "name"))
  );

接下来，我们需要定义一个辅助方法，用于随机生成一种颜色：

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

然后，在单击节点时，我们可以通过调用animate方法实现节点的颜色渐变动画：

myDiagram.addDiagramListener("ObjectSingleClicked", function(e) {
  var node = e.subject.part;
  var oldColor = node.findObject("SHAPE").fill;
  var newColor = getRandomColor();
  var anim = new go.Animation();
  anim.add(node.findObject("SHAPE"), "fill", oldColor, newColor);
  anim.duration = 1000;
  myDiagram.startTransaction("change node color");
  anim.start();
  myDiagram.commitTransaction("change node color");
});

在此过程中，我们首先获取被单击的节点，并获取其圆形元素的原始填充颜色（默认为“lightgray”）。然后，我们调用getRandomColor方法随机生成一个新颜色。接下来，我们创建一个新的动画对象，并将其应用于节点的圆形元素。最后，我们使用startTransaction和commitTransaction方法来确保动画在图形上正确呈现。

示例二：节点的位置动画

下面我们再看一个稍微复杂一点的示例，该示例演示了如何实现一个节点的位置动画。

和第一个示例类似，我们首先需要定义一个节点模板：

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "Rectangle", { fill: "lightgray", stroke: "black", strokeWidth: 1 }),
    $(go.TextBlock, { margin: 5 }, new go.Binding("text", "name"))
  );

然后，我们需要定义一个数据模型，来存储节点的初始位置和目标位置信息：

var model = $(go.TreeModel);
model.nodeDataArray = [
  { key: "Alpha", name: "Alpha", loc: "0 0", targetLoc: "150 150" },
  { key: "Beta", name: "Beta", loc: "200 200", targetLoc: "250 250" }
];
myDiagram.model = model;

在此过程中，我们将每个节点的位置信息存储为字符串，用空格分隔。例如，"0 0"表示节点的X轴和Y轴坐标都为0。

接下来，我们可以在鼠标单击事件中，实现节点位置的渐变动画：

function animateNode(node, targetLoc) {
  var anim = new go.Animation();
  anim.add(node, "location", node.location, go.Point.parse(targetLoc));
  anim.duration = 1000;
  myDiagram.startTransaction("animate node location");
  anim.start();
  myDiagram.commitTransaction("animate node location");
}

myDiagram.addDiagramListener("ObjectSingleClicked", function(e) {
  var node = e.subject.part;
  var data = node.data;
  animateNode(node, data.targetLoc);
});

在此过程中，我们首先获取被单击的节点，并从其数据模型中获取目标位置信息。然后，我们调用animateNode方法，将目标位置信息传递给它。在animateNode方法中，我们创建一个新动画对象，并将其应用于节点的位置信息。最后，我们使用startTransaction和commitTransaction方法来确保动画在图形上正确呈现。