这篇文章主要介绍“GoJs中的动画怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“GoJs中的动画怎么使用”文章能帮助大家解决问题。
GoJs动画的使用
在
gojs中支持默认的动画和自定义的动画两种，使用默认的动画的时候只需要给
Diagram的
AnimationManager属性修改就行。或者通过
Animation或者
AnimationTrigger来创建自定义动画。
使用默认的动画
默认的动画包括
Default和
AnimateLocations两种,其使用方法如下
//data
nodes:[
{ key: "1", color: "#99FFFF",text:"三国",figure:"Rectangle" },
{ key: "1-1", color: "#FF0000",text:"魏",figure:"Circle" },
{ key: "1-2", color: "#FFFF66",text:"蜀",figure:"Circle"},
{ key: "1-3", color: "#0000FF",text:"吴",figure:"Circle" },
],
links:[
{
from:"1",
to:"1-1"
},
{
from:"1",
to:"1-2"
},
{
from:"1",
to:"1-3"
},
]
//methods
Default(){
this.myDiagram.animationManager.initialAnimationStyle = go.AnimationManager.Default;
this.myDiagram.model = go.Model.fromJSON(this.myDiagram.model.toJSON());
},
AnimateLocations(){
this.myDiagram.animationManager.initialAnimationStyle = go.AnimationManager.AnimateLocations;
this.myDiagram.model = go.Model.fromJSON(this.myDiagram.model.toJSON());
},默认动画只需要修改
animationManager.initialAnimationStyle属性就可以实现
通过AnimationTrigger修改属性动画
this.myDiagram.nodeTemplate =
$$(go.Node, "Vertical",
{ selectionAdorned: false,selectionChanged: this.onSelectionChanged },
$$(go.Shape, "Circle",
{ width: 30, height: 30,name:"ICON" },
new go.AnimationTrigger('stroke'),
new go.AnimationTrigger('fill'),
new go.Binding("figure", "figure"),
),
$$(go.TextBlock,
new go.Binding("text", "text")),
);
this.myDiagram.model = new go.GraphLinksModel(this.nodes, this.links);
},
animateTrigger(){
this.myDiagram.commit(function(diag) {
diag.nodes.each(function(node){
node.elt(0).stroke = go.Brush.randomColor();
node.elt(0).fill = go.Brush.randomColor();
})
});
}如果给节点的绘图属性进行修改的过程中添加动画的话，则需要在属性的配置下面通过
new go.AnimationTrigger来配置需要添加动画的属性值，然后在按钮的点击事件绑定的函数
animateTrigger中，在函数中对添加了动画的属性进行一个修改操作就可以了。
删除节点的动画
在节点的删除过程中可以添加一个动画，但是节点删除之后画布中就不存在节点了。因此在删除的时候需要拷贝一下节点的信息，对拷贝的节点对象通过
Animation.add进行动画处理。在下面的示例中，我们利用前面的选中节点的删除的监听方法
SelectionDeleting进行操作。
this.myDiagram.addDiagramListener('SelectionDeleting', function(e) {
e.subject.each(function(part) {
if (!(part instanceof go.Node)) return;
let animation = new go.Animation();
let deletePart = part.copy();
animation.add(deletePart, "scale", deletePart.scale, 0.01);
animation.add(deletePart, "angle", deletePart.angle, 360);
animation.addTemporaryPart(deletePart, myDiagram);
animation.start();
});
});提示性的回弹动画
在很多场景中需要对操作过程有一个反馈，因此提供了一些提示性的回弹动画，比如缩小之后恢复原样，放大之后恢复原样的过程。代码示例如下
//Html
<button @click="angle">angle</button>
<button @click="position">position</button>
<button @click="zoomOut">zoomOut</button>
<button @click="zoomIn">zoomIn</button>
//methods
angle(){
this.myDiagram.animationManager.stopAnimation(true);
let animation = new go.Animation();
this.myDiagram.nodes.each(function(node) {
animation.add(node, "angle", node.angle, Math.random() * 90);
});
animation.start();
},
position(){
this.myDiagram.animationManager.stopAnimation(true);
let animation = new go.Animation();
animation.reversible = true;
animation.add(this.myDiagram, "position", this.myDiagram.position, this.myDiagram.position.copy().offset(200, 15));
animation.duration = 700;
animation.start();
},
zoomOut(){
this.myDiagram.animationManager.stopAnimation(true);
let animation = new go.Animation();
animation.reversible = true;
animation.add(this.myDiagram, "scale", this.myDiagram.scale, 0.2);
animation.start();
},
zoomIn(){
this.myDiagram.animationManager.stopAnimation(true);
let animation = new go.Animation();
animation.reversible = true;
animation.add(this.myDiagram, "scale", this.myDiagram.scale, 4);
animation.start();
}通过创建动画实例，然后通过
animation.add方法可以实现对
angle、position、scale的动画操作。 这里需要注意的是，在每次动画的函数开始必须通过
animationManager.stopAnimation方法来停止动画，否则的话，动画会在上一个动画的中间时刻就运行下一个动画，会造成图形变形，下面
zoomOut方法为例。