前言一套完整的可视化操作交互需要2D/3D的融合。上一期我们介绍了3D场景的环视漫游、巡逻漫游和动画效果，还包括冷站场景、热站场景和智能终端的实现原理。本期主要介绍二维绘图面板的动画效果和面板视频的嵌入。通过2D/3D融合体验，实现场景数据可视化的直观体现和面板动画交互体验的舒适体验。界面介绍及效果预览2D面板缩放的动画切换转场效果主要是通过加载绘图后缩放动画显示面板并在冷站场景和热站场景之间切换，通过动画切换转场效果实现该效果二维面板缩放。载图后缩放动画展示面板效果：冷站场景与热站场景切换效果：进度条展示效果在交互体验方面，进度条的增减视觉效果具有流畅的动画效果。视频嵌入效果点击智能终端设备场景中的摄像头交互后，会弹出变更设备场景的监控信息画面。代码实现1.2D面板缩放动画切换过渡效果实现面板缩放的动画切换过渡效果主要是通过设置图元的锚点固定到要缩放的边上，然后通过控制缩放实现缩放效果原语的价值。图元中的字体通过透明度的变化实现了渐变呈现的效果。下面以标题的缩放动画来说明实现方法。首先设置标题锚点居中，即水平锚点和垂直锚点均为0：title.setAnchor(x,y|{x:0.5,y:0.5})此时，标题图形元素会到达锚点居中效果：此时我们只需要将标题的水平缩放值设置为0，然后通过HT动画对标题的缩放值进行动画缩放，然后改变透明度标题名称通过动画实现，即实现面板缩放动画切换过渡效果。tittle.scaleX(0);动画的实现主要是通过HT自带的ht.Default.startAnim动画函数，支持Frame-Based和Time-Based动画。这里的实现采用了Time-Based动画的方式。esting参数用于让用户定义函数，通过数学公式控制动画，比如匀速变化、先慢后快等，请参考http://easings.net/，本例中，采用先慢后快的实现方式。具体实现伪代码如下：//标题动画titleAnim(){constself=this;constg2d=self.g2d;constg2dDm=g2d.dm();//获取标题图形元素的水平缩放值lettitle_index=this.tittle.getScaleX();//缩放值动画执行入口ht.Default.startAnim({//动画持续时间:300,//在Easing.js中调用摆动动画效果easing:E??asing.swing,//动画执行内容action:(v,t)=>{//通过修改标题水平缩放值实现动画效果this.tittle.setScaleX(tittle_index+(1-tittle_index)*v);},finishFunc:()=>{//执行标题缩放值动画结束后名称透明度渐变显示动画ht.Default.startAnim({duration:1000,easing:E??asing.swing,action:(v,t)=>{//通过修改标题名称透明度实现动画效果this.tittleName.eachChild(c=>{c.s('opacity',c.s('opacity')+(1-c.s('opacity'))*v);});},finishFunc:()=>{//结束后调用执行下一个缩放值动画和字体透明动画}});}});}Easing.js是自己封装的动画效果，比如从慢摇到快的摇摆动画效果：constEasing={swing:function(t){return(-Math.cos(t*PI)/2)+0.5;}}二、进度条显示效果是通过封装一个setValueWithAnimation进度条动画来实现的，主要是通过参数（节点、名称、值、格式）：节点：进度条图形元素节点；name：传入的参数为进度条图元素节点的属性名，一般为需要更改的进度值precent，取值范围0~1;value：根据传入的名称更改对应的值;format：如果有格式，可以更改新值的格式；主要实现方式是利用HT的ht.Default.startAnim动画函数实现新值newValue与旧值oldValue的差异范围动画实现setValueWithAnimation(node,name,value,format){让oldValue=node.a(name);值*=1；让范围=值-旧值；ht.Default.startAnim({duration:1000,easing:E??asing.easeOutStrong,action:(v,t)=>{letnewValue=oldValue+range*v;if(format){newValue=format(newValue);}节点.a(name,newValue);}});}同样，这里的动画效果也是Easing.js中easeOutStrong逐渐加速的效果：constEasing={easeOutStrong:function(t){return1-(--t)*t*t*t;}}三、视频嵌入效果的实现在实时监控系统中，常用的流媒体传输协议主要有：RTMP、RTSP、HLS和HTTP-FLV。RTMP（RealTimeMessagingProtocol）：实时消息传输协议。在RTMP协议中，视频必须采用H264编码，音频必须采用AAC或MP3编码，并且多以flv格式进行打包。因为RTMP协议传输的基本都是FLV格式的流文件，所以必须要用flash播放器才能播放。RTSP（Real-TimeStreamProtocol）：RTSP实时性非常好，适用于视频聊天、视频监控等HLS（HttpLiveStreaming）：Apple定义的基于HTTP的流媒体实时传输协议.传输内容包括两部分：1.M3U8描述文件，2.TS媒体文件。TS媒体文件中的视频必须是H264编码，音频必须是AAC或MP3编码。数据通过HTTP协议传输。目前video.js库支持播放这种格式的文件。HTTP-FLV：这个协议就是http+flv，将音视频数据封装成FLV格式，然后通过http协议传输给客户端。该协议极大地方便了浏览器客户端播放直播视频流。目前flv.js库支持播放这种格式的文件。本例中的实现方式主要是双击3D场景中的摄像头，弹出监控弹窗，然后加载本地资源的视频文件。在实际的应用项目场景中，我们可以灵活合理的使用以上常用的流媒体传输协议来达到实时监控的效果。为了处理点击事件的交互，这里添加事件交互监听器。mi是addInteractorListener的缩写，可以理解HT交互监听器的实现。g3d.mi(e=>{constkind=e.kind;//双击事件处理if(kind==='doubleClickData'){//双击节点letdata=e.data;//getDouble-点击节点的taglettag=data.getTag();if(!tag)return;//如果节点tag是monitorif(tag==='monitor'){//监控面板显示这个.intelligentMonitoring.s('2d.visible',true);//加载本地资源视频流this.video.a('videoURL','./storage/assets/media/video.mp4');}}});总结IBMS智能集成系统管理通过2D面板与3D场景的联动交互，让整个系统的内容结构更加直观逼真。通过2D面板的事件监听和处理，3D场景相应进行环绕漫游、漫游漫游和场景切换，更加人性化。再加上3D场景中各种有趣的动画和2D面板中的面板缩放动画、进度条动画，丰富了可视化操作的特点，这也是工业互联网必不可少的组成部分。在介绍了2D/3D一体的IBMS智能集成系统场景和面板逼真直观的特点之后，本系统中最重要的两点：智能楼宇管理系统、电梯监控系统*和停车场管理系统*将在下一期，小编将为大家详细讲解。2019年我们还更新了数百个工业互联网2D/3D可视化案例集，在这里你可以找到很多新奇的例子，发现不一样的工业互联网：https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA同时，还可以查看更多案例及效果：https://www.hightopo.com/demos/index.html
