GoJs中的動畫怎么使用

這篇文章主要介紹“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方法為例。

關于“GoJs中的動畫怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。