GoJs中的動(dòng)畫使用示例詳解
前言
在可視化圖形的使用過程中，在圖形初次渲染的時(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í)候只需要給Diagram的AnimationManager屬性修改就行?；蛘咄ㄟ^Animation或者AnimationTrigger來創(chuàng)建自定義動(dòng)畫。
使用默認(rèn)的動(dòng)畫
默認(rèn)的動(dòng)畫包括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());
},
默認(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)文章
Bootstrap實(shí)現(xiàn)導(dǎo)航欄的2種方式
這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)導(dǎo)航欄的2種方式，一是利用按鈕組實(shí)現(xiàn)、二是Bootstrap專門做了相應(yīng)的css類,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)石頭剪刀布游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了詳解微信小程序 頁面跳轉(zhuǎn) 傳遞參數(shù)，現(xiàn)在分享給大家，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2016-12-12
這篇文章主要介紹了js實(shí)現(xiàn)限定范圍拖拽的示例，幫助大家更好的制作js特效，美化自己的網(wǎng)頁，感興趣的朋友可以了解下2020-10-10
js實(shí)現(xiàn)圖片數(shù)組中圖片切換效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片數(shù)組中圖片切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JS中用try catch對(duì)代碼運(yùn)行的性能影響分析
要捕獲JavaScript代碼中的異常一般會(huì)采用 try catch，不過try catch的使用是否是對(duì)代碼性能產(chǎn)生影響呢？答案是肯定有的，但是有多少不得而知。下面這篇文章就給大家詳細(xì)介紹了在JS中用try catch對(duì)代碼運(yùn)行的性能影響，有需要的朋友們可以參考借鑒。2016-12-12
用原生JS對(duì)AJAX做簡(jiǎn)單封裝的實(shí)例代碼
下面小編就為大家?guī)硪黄迷鶭S對(duì)AJAX做簡(jiǎn)單封裝的實(shí)例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
JS利用時(shí)間戳倒計(jì)時(shí)的實(shí)現(xiàn)示例
這篇文章主要介紹了JS利用時(shí)間戳倒計(jì)時(shí)的實(shí)現(xiàn)示例,本文將提供代碼示例和詳細(xì)的步驟,幫助你實(shí)現(xiàn)一個(gè)簡(jiǎn)單而實(shí)用的時(shí)間戳倒計(jì)時(shí),感興趣的可以了解一下2023-12-12
詳解layui?laydate選擇時(shí)間的回調(diào)方法
這篇文章主要介紹了layui?laydate選擇時(shí)間的回調(diào)方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
這篇文章主要給大家介紹了關(guān)于微信小程序中獲取設(shè)備信息的相關(guān)資料,微信小程序是一種在微信平臺(tái)上運(yùn)行的應(yīng)用程序,它具有輕量化、便捷性和高兼容性的特點(diǎn),文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07