前言本期为大家带来一个非常有趣的demo，我们制作了一套自己的3D流水线控制系统，使用（http://www.hightopo.com）HT的Graph3dView组件封装了WebGL的底层技术，和其他HT组件一样，基于HT统一的DataModel数据模型驱动图形显示。效果图这是2D主界面：这是3D界面的局部演示：由于gif上传有大小限制，请务必到网页体验体验，双击导入阀即可开始。（戳我进入！）代码实现主要教大家一种制作流程动画的方法。我使用各种方法，包括动画。让我慢慢听我说。既然是3D界面，前面讲过创建3D渲染引擎组件，可视化呈现数据模型的3D环境场景，即dataModel和graph3dView。（后面会用到缩写的dm和gv）我们先来设置一下整体界面的基础：//禁止拖拽gv.setMovableFunc(function(){returnfalse})//设置眼睛gv.setEye([-922,1745,4659])//设置中心点gv.setCenter([98,621,-318])然后，获取所有需要动画的阀门，我们按照步骤操作，以免遗漏关键步骤：vara=dm.getDataByTag('ImportElectricBallValve')varb=dm.getDataByTag('BypassValve')varc=dm.getDataByTag('ExportElectricBallValve')...我们可以开始我们的动画设计了！我使用了flyTo()方法，结果发现效果确实不错。我们要提前准备好所有的动画组，把它们串起来。我将启动演示设计为通过双击入口阀进行控制。例如，第一步应该是将进口球阀的开启由遥控改为就地控制。所以，我们要在这里启动镜头：gv.mi(function(e){if(e.kind==='doubleClickData'){if(e.data.getTag()==='importelectricballvalve'){gv.flyTo(n,{animation:true,direction:[-200,0,0],distance:100})anim1()}}})注意mi是添加交互事件监听器的缩写,添加交互器监听器。//示例：gv.mi(function(event){//事件格式：{kind:'clickData',//事件类型data:data,//事件相关的数据元素part:"part",//事件的区域,icon,label等event:e//htmlnativeevent}})其中n是第一步中的button，然后引入这个方法的相关参数：flyTo:cameralooksataspecificnodeornodelist,parameters(target,options)，其中options：可选属性，格式为object({})，属性包括：animation：默认false，是否启用动画，可设置为true或false或animation动画对象center：defaultundefined,new场景的中心点，shape为[0,0,0]（如果为空，如果target是one，会看节点的中心点，如果target是list，会看根据节点列表计算出来的中心）direction:默认未定义，眼睛在目标中心方向（相对于目标，受目标自身旋转影响），如[0,1,5]onthelocationdirectionofthetargetworldDirection:defaultundefined,眼睛在目标的方向（相对于场景，不受目标的旋转影响），如[0,1,5]斜距atthetargetposition:defaultundefined(如果没有定义，使用下面的比例方式计算距离)，浮点型，表示眼睛和中心的固定距离ratio:默认0.8，浮点型，表示动态计算眼睛和中心之间的距离（例如，0.8表示眼睛动态计算上述方向的距离，以适应屏幕80%范围内的目标边界框的所有8个角）。注意，如果direction和worldDirection都没有配置，那么camera的角度在使用前保持不变。后面会用到所有的动画，说明一下。在HT的数据模型驱动图形组件的设计架构下，动画可以理解为某些属性从初始值逐渐变化到目标值的过程。HT提供了ht.Default.startAnim的动画功能。它支持基于帧和基于时间的动画。在Frame-Based中，用户通过指定动画帧数frame和动画帧间隔参数interval来控制动画效果。我使用基于时间的方法。在该方法中，用户只需指定duration动画循环的毫秒数，HT会在指定的时间段内完成动画。不像Frame-Based方法有固定的帧数，也就是action函数被调用了多少次，Time-Based方法的帧数或者action函数被调用的次数取决于系统环境。一般来说，系统配置更好、浏览器效率更高的机器会调用更多的帧，动画过程也会更流畅。由于js语言无法精确控制interval时间间隔，所以使用Frame-Based也无法精确控制动画时间段。即使相同的帧和区间参数在不同的环境下，动画周期也可能存在较大差异。所以HT默认使用Time-Based。基于方法，如果没有设置duration和frames参数，duration参数会被系统自动设置为ht.Default.animDuration值。action函数是实现动画过程中的属性变化（改变参数和进度）。然后我们将开始执行第一个动画-anim1():functionanim1(){ht.Default.startAnim({duration:2000,action:function(v,t){//旋转旋钮改变它的角度r3n.r3(n.r3()[0]-0.02,n.r3()[1],n.r3()[2])},finishFunc:function(){//动画结束后调用Functiongv.flyTo(a,{animation:true,direction:[-2000,1000,2000],distance:1000})anim2()}})}...可以看到我们使用flyTo()来靠近下一个stepswitch，然后再执行它的动画等等，实现一套操作流程清晰的动画指日可待！当所有步骤结束后，我们要把镜头拉回到最开始的初始视角，所以要注意一开始就提前复制位置：varoEye=ht.Default.clone(gv.getEye())varoCenter=ht.Default.clone(gv.getCenter())这样我们就恢复了上次finishiFunc中的位置：gv.setEye(oEye)gv.setCenter(oCenter)最后来个简洁的系统操作processiscompleted这很难理解。概要HTForWeb提供了一个完整的基于HTML5的图形界面组件库。您可以轻松构建跨桌面和移动端的现代企业应用，无需担心跨平台兼容性和触屏手势交互。也可用于快速创建和部署、高度可定制的拓扑图形和具有强大交互功能的表盘图。HTforWeb非常适合实时监控系统的界面呈现，广泛应用于电信网络拓扑和设备管理，以及电力、燃气等工业自??动化（HMI/SCADA）领域。
