GoJs中的動畫使用示例詳解
前言
在可視化圖形的使用過程中,在圖形初次渲染的時候、增加節(jié)點、刪除節(jié)點等操作的時候。如果沒有一個動畫過程,就會把整個過程變得有一閃而過,影響用戶的體驗,也影響用戶對操作是否成功的判斷。
GoJs動畫的使用
在gojs
中支持默認的動畫和自定義的動畫兩種,使用默認的動畫的時候只需要給Diagram
的AnimationManager
屬性修改就行?;蛘咄ㄟ^Animation
或者AnimationTrigger
來創(chuà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()); },
默認動畫只需要修改animationManager.initialAnimationStyle
屬性就可以實現(xiàn)
通過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(); }) }); }
如果給節(jié)點的繪圖屬性進行修改的過程中添加動畫的話,則需要在屬性的配置下面通過new go.AnimationTrigger
來配置需要添加動畫的屬性值,然后在按鈕的點擊事件綁定的函數(shù)animateTrigger
中,在函數(shù)中對添加了動畫的屬性進行一個修改操作就可以了。
刪除節(jié)點的動畫
在節(jié)點的刪除過程中可以添加一個動畫,但是節(jié)點刪除之后畫布中就不存在節(jié)點了。因此在刪除的時候需要拷貝一下節(jié)點的信息,對拷貝的節(jié)點對象通過Animation.add
進行動畫處理。在下面的示例中,我們利用前面的選中節(jié)點的刪除的監(jiān)聽方法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(); }); });
提示性的回彈動畫
在很多場景中需要對操作過程有一個反饋,因此提供了一些提示性的回彈動畫,比如縮小之后恢復(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)建動畫實例,然后通過animation.add
方法可以實現(xiàn)對angle、position、scale
的動畫操作。 這里需要注意的是,在每次動畫的函數(shù)開始必須通過animationManager.stopAnimation
方法來停止動畫,否則的話,動畫會在上一個動畫的中間時刻就運行下一個動畫,會造成圖形變形,下面zoomOut
方法為例。
總結(jié)
本文主要介紹了gojs
內(nèi)部已經(jīng)封裝的一些動畫的配置和使用方法,有了動畫的引入,不僅僅可以讓操作過程變得很絲滑,很好的提高的用戶的體驗。并且讓比如刪除節(jié)點這種沒有感覺的操作增加刪除的觀感。后面會對動畫的自定義方法進行一個介紹。
以上就是GoJs中的動畫使用示例詳解的詳細內(nèi)容,更多關(guān)于GoJs動畫使用的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
小程序?qū)崿F(xiàn)新用戶判斷并跳轉(zhuǎn)激活的方法
這篇文章主要介紹了小程序?qū)崿F(xiàn)新用戶判斷并跳轉(zhuǎn)激活的方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05js調(diào)試工具 Javascript Debug Toolkit 2.0.0版本發(fā)布
Javascript Debug Toolkit是一個可以跨瀏覽器調(diào)試javascript的開源項目,支持在IE,FIREFOX,SAFARI,CHROME等瀏覽器中調(diào)試javascript。2.0.0版本做了較大變動,增加以下功能2008-12-12JS實現(xiàn)網(wǎng)頁頂部向下滑出的全國城市切換導(dǎo)航效果
這篇文章主要介紹了JS實現(xiàn)網(wǎng)頁頂部向下滑出的全國城市切換導(dǎo)航效果,涉及javascript鼠標(biāo)事件及頁面元素顯示的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08js中window.open()的所有參數(shù)詳細解析
本篇文章主要是對js中window.open()的所有參數(shù)進行了詳細的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01