欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

GoJs中的動(dòng)畫使用示例詳解

 更新時(shí)間:2023年05月05日 10:24:16   作者:沅芷湘蘭  
這篇文章主要為大家介紹了GoJs中的動(dòng)畫使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

前言

在可視化圖形的使用過程中,在圖形初次渲染的時(shí)候、增加節(jié)點(diǎn)、刪除節(jié)點(diǎn)等操作的時(shí)候。如果沒有一個(gè)動(dòng)畫過程,就會(huì)把整個(gè)過程變得有一閃而過,影響用戶的體驗(yàn),也影響用戶對(duì)操作是否成功的判斷。

GoJs動(dòng)畫的使用

gojs中支持默認(rèn)的動(dòng)畫和自定義的動(dòng)畫兩種,使用默認(rèn)的動(dòng)畫的時(shí)候只需要給DiagramAnimationManager屬性修改就行?;蛘咄ㄟ^Animation或者AnimationTrigger來創(chuàng)建自定義動(dòng)畫。

使用默認(rèn)的動(dòng)畫

默認(rèn)的動(dòng)畫包括DefaultAnimateLocations兩種,其使用方法如下

//data
nodes:[
{ key: "1", color: "#99FFFF",text:"三國(guó)",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());
},

默認(rèn)動(dòng)畫只需要修改animationManager.initialAnimationStyle屬性就可以實(shí)現(xiàn)

通過AnimationTrigger修改屬性動(dòng)畫

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();
        })
    });
}

如果給節(jié)點(diǎn)的繪圖屬性進(jìn)行修改的過程中添加動(dòng)畫的話,則需要在屬性的配置下面通過new go.AnimationTrigger來配置需要添加動(dòng)畫的屬性值,然后在按鈕的點(diǎn)擊事件綁定的函數(shù)animateTrigger中,在函數(shù)中對(duì)添加了動(dòng)畫的屬性進(jìn)行一個(gè)修改操作就可以了。

刪除節(jié)點(diǎn)的動(dòng)畫

在節(jié)點(diǎn)的刪除過程中可以添加一個(gè)動(dòng)畫,但是節(jié)點(diǎn)刪除之后畫布中就不存在節(jié)點(diǎn)了。因此在刪除的時(shí)候需要拷貝一下節(jié)點(diǎn)的信息,對(duì)拷貝的節(jié)點(diǎn)對(duì)象通過Animation.add進(jìn)行動(dòng)畫處理。在下面的示例中,我們利用前面的選中節(jié)點(diǎn)的刪除的監(jiān)聽方法SelectionDeleting進(jìn)行操作。

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();
    });
});

提示性的回彈動(dòng)畫

在很多場(chǎng)景中需要對(duì)操作過程有一個(gè)反饋,因此提供了一些提示性的回彈動(dòng)畫,比如縮小之后恢復(fù)原樣,放大之后恢復(fù)原樣的過程。代碼示例如下

//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(); 
}

通過創(chuàng)建動(dòng)畫實(shí)例,然后通過animation.add方法可以實(shí)現(xiàn)對(duì)angle、position、scale的動(dòng)畫操作。 這里需要注意的是,在每次動(dòng)畫的函數(shù)開始必須通過animationManager.stopAnimation方法來停止動(dòng)畫,否則的話,動(dòng)畫會(huì)在上一個(gè)動(dòng)畫的中間時(shí)刻就運(yùn)行下一個(gè)動(dòng)畫,會(huì)造成圖形變形,下面zoomOut方法為例。

總結(jié)

本文主要介紹了gojs內(nèi)部已經(jīng)封裝的一些動(dòng)畫的配置和使用方法,有了動(dòng)畫的引入,不僅僅可以讓操作過程變得很絲滑,很好的提高的用戶的體驗(yàn)。并且讓比如刪除節(jié)點(diǎn)這種沒有感覺的操作增加刪除的觀感。后面會(huì)對(duì)動(dòng)畫的自定義方法進(jìn)行一個(gè)介紹。

以上就是GoJs中的動(dòng)畫使用示例詳解的詳細(xì)內(nèi)容,更多關(guān)于GoJs動(dòng)畫使用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • js實(shí)現(xiàn)精美的銀灰色豎排折疊菜單

    js實(shí)現(xiàn)精美的銀灰色豎排折疊菜單

    這篇文章主要介紹了js實(shí)現(xiàn)精美的銀灰色豎排折疊菜單,可實(shí)現(xiàn)頁(yè)面左側(cè)豎排的縱向折疊菜單效果,非常美觀實(shí)用,需要的朋友可以參考下
    2015-05-05
  • js修改input的type屬性及瀏覽器兼容問題探討與解決

    js修改input的type屬性及瀏覽器兼容問題探討與解決

    js修改input的type屬性有些限制,今天遇到個(gè)問題一開始的時(shí)候,input的類型是text,后來變成了password類型。直觀的思路是用js修改input的type類型。但ie下這么做不可行,所以只能換個(gè)思路感興趣的朋友可以了解下
    2013-01-01
  • 最新評(píng)論