翻譯|使用教程|編輯:吳園園|2020-01-20 15:46:41.440|閱讀 1544 次
概述:GoJS提供了幾種內(nèi)置動(dòng)畫(默認(rèn)情況下啟用)以及創(chuàng)建任意動(dòng)畫的功能。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
GoJS是一款功能強(qiáng)大,快速且輕量級(jí)的流程圖控件,可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖,且極大地簡(jiǎn)化您的JavaScript / Canvas 程序。
GoJS提供了幾種內(nèi)置動(dòng)畫(默認(rèn)情況下啟用)以及創(chuàng)建任意動(dòng)畫的功能。
該Diagram.animationManager處理一中的動(dòng)畫圖。該AnimationManager自動(dòng)設(shè)置和調(diào)度默認(rèn)的動(dòng)畫,并具有屬性來定制和禁用它們。通過創(chuàng)建Animation或AnimationTrigger的實(shí)例,可以自定義動(dòng)畫。
簡(jiǎn)介頁面詳細(xì)介紹了用于GoJS動(dòng)畫的不同類。
要查看自定義動(dòng)畫的更多演示,請(qǐng)?jiān)L問“ 自定義動(dòng)畫”擴(kuò)展示例。
默認(rèn)動(dòng)畫
默認(rèn)情況下,AnimationManager創(chuàng)建并運(yùn)行使用動(dòng)畫的單一實(shí)例的框圖幾個(gè)動(dòng)畫AnimationManager.defaultAnimation。這些動(dòng)畫通過Diagram.model setter和布局在各種命令上發(fā)生。與其他動(dòng)畫不同,如果在動(dòng)畫過程中開始新事務(wù),它們將被停止。
出于以下原因,GoJS將自動(dòng)開始動(dòng)畫制作:
由CommandHandler調(diào)用:
通過圖調(diào)用:
由AnimationTrigger調(diào)用,如果已聲明:
上面引用的名稱是AnimationManager.animationReasons集中的字符串。
默認(rèn)初始動(dòng)畫從GoJS 2.1開始,默認(rèn)的初始動(dòng)畫使圖表逐漸淡入視圖。先前版本分別為零件位置設(shè)置動(dòng)畫。為了控制初始動(dòng)畫行為,現(xiàn)在存在AnimationManager.initialAnimationStyle,默認(rèn) 情況下將其設(shè)置為AnimationManager,Default,但可以將其設(shè)置為AnimationManager,AnimateLocations以使用GoJS 2.0中的動(dòng)畫樣式。您也可以將此屬性設(shè)置為AnimationManager,None,并使用"InitialAnimationStarting" DiagramEvent定義自己的初始動(dòng)畫。
這是一個(gè)帶有按鈕的示例,這些按鈕將AnimationManager.initialAnimationStyle設(shè)置為三個(gè)不同的值,然后重新加載該圖。第四個(gè)按鈕說明了如何使用"InitialAnimationStarting" DiagramEvent制作自定義的“放大”動(dòng)畫。
diagram.nodeTemplate = $(go.Node, "Auto", $(go.Shape, "RoundedRectangle", { strokeWidth: 0, fill: "lightblue" }), $(go.TextBlock, { margin: 8, font: "bold 14px sans-serif", stroke: '#333' }, new go.Binding("text", "key")) ); diagram.model = new go.GraphLinksModel([{ key: 'Alpha' }, { key: 'Beta' }, { key: 'Delta' }, { key: 'Gamma' }]); // only needed for this demonstration, this flag is used to stop // the "InitialAnimationStarting" listener when other buttons are pressed window.custom = false; window.animateDefault = function() { window.custom = false; diagram.animationManager.initialAnimationStyle = go.AnimationManager.Default; diagram.model = go.Model.fromJSON(diagram.model.toJSON()); } window.animateLocations = function() { window.custom = false; diagram.animationManager.initialAnimationStyle = go.AnimationManager.AnimateLocations; diagram.model = go.Model.fromJSON(diagram.model.toJSON()); } window.animateNone = function() { window.custom = false; diagram.animationManager.initialAnimationStyle = go.AnimationManager.None; diagram.model = go.Model.fromJSON(diagram.model.toJSON()); } window.animateCustom = function() { window.custom = true; diagram.animationManager.initialAnimationStyle = go.AnimationManager.None; // Customer listener zooms-in the Diagram on load: diagram.addDiagramListener("InitialAnimationStarting", function(e) { var animation = e.subject.defaultAnimation; if (window.custom === false) { // a different button was pressed, restore default values on the default animation: animation.easing = go.Animation.EaseInOutQuad; animation.duration = NaN; return; } animation.easing = go.Animation.EaseOutExpo; animation.duration = 1500; animation.add(e.diagram, 'scale', 0.1, 1); animation.add(e.diagram, 'opacity', 0, 1); }) diagram.model = go.Model.fromJSON(diagram.model.toJSON()); }
該AnimationManager可以通過設(shè)置來關(guān)閉AnimationManager.isEnabled來false。可以通過重寫AnimationManager.canStart來關(guān)閉特定的默認(rèn)動(dòng)畫,或者查詢動(dòng)畫即將開始的原因(AnimationManager.animationReasons),然后可能返回false。
如果在動(dòng)畫過程中開始新的事務(wù),則默認(rèn)動(dòng)畫將停止。對(duì)于其他Animation而言,情況并非如此,它們不會(huì)被新事務(wù)停止,并且可以無限期地繼續(xù)。
可動(dòng)畫屬性
默認(rèn)情況下,AnimationTriggers和Animation可以為GraphObjects的以下屬性設(shè)置動(dòng)畫:
另外,Animation(但不是AnimationTriggers)可以為Diagram的以下屬性設(shè)置動(dòng)畫:
AnimationTrigger類
(2.1版本的新功能)
一個(gè)AnimationTrigger用于當(dāng)其值已更改為GraphObject性質(zhì)申報(bào)動(dòng)畫。定義觸發(fā)器后,對(duì)目標(biāo)屬性的更改將從舊值動(dòng)畫化為新值。在模板中,觸發(fā)器的定義方式與綁定類似:
// In this shape definition, two triggers are defined on a Shape. // These will cause all changes to Shape.stroke and Shape.fill to animate // from their old values to their new values. $(go.Shape, "Rectangle", { strokeWidth: 12, stroke: 'black', fill: 'white' }, new go.AnimationTrigger('stroke'), new go.AnimationTrigger('fill') )下面是一個(gè)例子,一個(gè)HTML按鈕,它將圖形的stroke和fill新的隨機(jī)值:
diagram.nodeTemplate = $(go.Node, $(go.Shape, "Rectangle", { strokeWidth: 12, stroke: 'black', fill: 'white' }, new go.AnimationTrigger('stroke'), new go.AnimationTrigger('fill') ) ); diagram.model = new go.GraphLinksModel([{ key: 'Alpha' }]); // One node // attach this Diagram to the window to use a button window.animateTrigger1 = function() { diagram.commit(function(diag) { var node = diag.nodes.first(); node.elt(0).stroke = go.Brush.randomColor(); node.elt(0).fill = go.Brush.randomColor(); }); }
AnimationTriggers可以立即調(diào)用動(dòng)畫,以已修改的每個(gè)GraphObject的每個(gè)屬性開始一個(gè)新動(dòng)畫,也可以(更有效地)將它們捆綁到默認(rèn)動(dòng)畫(AnimationManager.defaultAnimation)中,并在下一個(gè)動(dòng)畫結(jié)束時(shí)開始交易。可以使用AnimationTrigger.startCondition分別通過值 AnimationTrigger,Immediate和AnimationTrigger,Bundled設(shè)置這些行為。默認(rèn)值A(chǔ)nimationTrigger,Default嘗試推斷最佳值。如果沒有正在進(jìn)行的事務(wù)或Diagram.skipsUndoManager為true ,它將立即開始。
AnimationTriggers僅在GraphObjects的模板中定義,而不能在RowColumnDefinitions或Diagrams上使用。
====================================================
想要購買GoJS正版授權(quán)的朋友可以
有關(guān)產(chǎn)品的最新消息和最新資訊,歡迎掃描關(guān)注下方微信公眾號(hào)
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:GoJS