Posted on 2014-10-11 10:21
TWaver 閱讀(3200)
評論(1) 編輯 收藏
使用過MONO編輯器的朋友都應該了解MONO中支持一些動畫的設置，比如開門，開窗，彈出設備，旋轉場景，鏡頭巡航等。但如何將這些動畫應用到自己的場景中呢？比如我們在編輯器中給機柜定義了動畫，怎樣讓做好的機柜模型加載到自己的場景中并能播放動畫呢？別急，我們來舉個例子給大家講解一下。
首先我們使用編輯器建一個機柜的模型，這里就不給大家演示了，MONO編輯器的平臺上提供了多種機柜的模型，我們直接下載一個模型導出一份json可以了，這里我們直接拿了MONO中公開的“42U標準機柜”的數據并導出了一份數據格式保存在本地。
接著可以在自己的場景中將這份數據導入進來，代碼如下：
1 | mono.Toolkits.loadTemplateUrl(network3d.getDataBox(),'./equipment.json'); |
在這個例子中我們通過在地板上指定幾個點，點擊確認后動態從文件中加載模型數據。加載數據后我們加上了機柜從地板上慢慢升級的動畫。這個動畫在mono中已經封裝了，我們只需調用下面的代碼即可：
2 | mono.AniUtil.playAnimation(hostNode, 'scale:top:1:2000:500'); |
導入的模板中保存了動畫的屬性，但是雙擊后并不能播放模板中的動畫。是因為這些動作是加在network上的，我們需要在自己的工程中加上雙擊播放動畫的代碼：
1 | network3d.getRootView().addEventListener('dblclick', handleDoubleClick); |
2 | //play animation when double click equipment |
3 | var handleDoubleClick = function(e){ |
4 | var firstClickObject=Utils._findFirstObjectByMouse(network3d,e); |
5 | if(firstClickObject.element) { |
6 | playAnimation(firstClickObject.element); |
加上這段就可以播放雙擊對象的動畫了。
這里我們讓開門和彈出設備的動畫連續播放，也就是當開門動畫播放完畢后，我們再回調一下彈出設備的動畫，代碼如下：
1 | var door = findDatafromChildren(object,101); |
2 | var server = findDatafromChildren(object,102); |
3 | var played = object._played || false; |
4 | console.log(object.__status ,object._played); |
5 | //check animation of element is playing |
6 | if(object.__status && object.__status === "playing") return; |
8 | var animations = [{method:playEquipment,args:[door]}, |
9 | {method:playEquipment,args:[server]}]; |
11 | function playEquipment(equip, callback){ |
12 | mono.AniUtil.playAnimation(equip, equip.getClient('animation'), 1000, 0,null, function(){ |
這樣導入模型文件的動畫就做完了，這個小demo在MONO的1.9版本中已經提供了，感興趣的朋友可以到twaver的網站上申請mono最新的下載包。
最后附上一張Demo的截圖，其中綠色地塊表示正準備創建機柜的區域：
