TWaver - 专注UI技术

http://twaver.servasoft.com/
posts - 171, comments - 191, trackbacks - 0, articles - 2
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

MONO中动画的导出与播放

Posted on 2014-10-11 10:21 TWaver 阅读(3190) 评论(1)  编辑  收藏

使用过MONO编辑器的朋友都应该了解MONO中支持一些动画的设置,比如开门,开窗,弹出设备,旋转场景,镜头巡航等。但如何将这些动画应用到自己的场景中呢?比如我们在编辑器中给机柜定义了动画,怎样让做好的机柜模型加载到自己的场景中并能播放动画呢?别急,我们来举个例子给大家讲解一下。

首先我们使用编辑器建一个机柜的模型,这里就不给大家演示了,MONO编辑器的平台上提供了多种机柜的模型,我们直接下载一个模型导出一份json可以了,这里我们直接拿了MONO中公开的“42U标准机柜”的数据并导出了一份数据格式保存在本地。

接着可以在自己的场景中将这份数据导入进来,代码如下:

1mono.Toolkits.loadTemplateUrl(network3d.getDataBox(),'./equipment.json');

在这个例子中我们通过在地板上指定几个点,点击确认后动态从文件中加载模型数据。加载数据后我们加上了机柜从地板上慢慢升级的动画。这个动画在mono中已经封装了,我们只需调用下面的代码即可:

1//play animation
2mono.AniUtil.playAnimation(hostNode, 'scale:top:1:2000:500');

导入的模板中保存了动画的属性,但是双击后并不能播放模板中的动画。是因为这些动作是加在network上的,我们需要在自己的工程中加上双击播放动画的代码:

1network3d.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);
7            }
8        }

加上这段就可以播放双击对象的动画了。

这里我们让开门和弹出设备的动画连续播放,也就是当开门动画播放完毕后,我们再回调一下弹出设备的动画,代码如下:

1var door = findDatafromChildren(object,101);
2var server = findDatafromChildren(object,102);
3var played = object._played || false;
4console.log(object.__status ,object._played);
5//check animation of element is playing
6if(object.__status && object.__status === "playing"return;
7 
8var animations = [{method:playEquipment,args:[door]},
9                  {method:playEquipment,args:[server]}];
10 
11function playEquipment(equip, callback){
12    mono.AniUtil.playAnimation(equip, equip.getClient('animation'), 1000, 0,nullfunction(){
13        if(callback){
14            callback.call();
15        }
16    });
17}

这样导入模型文件的动画就做完了,这个小demo在MONO的1.9版本中已经提供了,感兴趣的朋友可以到twaver的网站上申请mono最新的下载包。
最后附上一张Demo的截图,其中绿色地块表示正准备创建机柜的区域:


评论

# www.elephantec.cn  回复  更多评论   

2014-10-11 16:24 by 合肥网站建设
向你学习!

只有注册用户登录后才能发表评论。


网站导航: