Airglass.js最佳实践:定制化地图与雷达波动效

地图是FUI界面中常出现的组件之一。我希望Airglass.js能处理好地图渲染,以及地图中丰富多样的动效,所以尝试用Airglass.js完成一个关于地图的最佳实践。在探索的中后期,我将Three.js纳入解决方案与Airglass.js来一次混搭,2D与3D的跨维度合作,这也是我期望中的FUI界面的最终样子——airglass.js专注于可交互界面——three.js专注于数据与交互驱动的可视化呈现。本篇想法还涉及到Airglass.js优化的API。还介绍自定义地图。还会推荐一些有意思的网站。

2D地图

Airglass.js自定义地图与地图雷达波标记

为什么不直接使用第三方地图开放平台提供的现成地图数据?因为它们做得太多了!在起步阶段,我想要更纯粹的地图,考虑到相关法律法规的要求,我并没有绘制真实地理信息的打算。不切实际是实际的根本,实际是不切实际的基础。即使我想跳脱出真实去定制出虚拟的类似游戏中的地图,也需要参考真实的地图才行。下面演示中地图的道路是我从geojson.io网站导出的自己绘制的地理特征。可以使用Github账号登录该网站,将标注的地理信息存储到Gist中,以备下一次继续标注或修改。

geojson.io支持绘制的几何特征包括Point、Polygon和LineString。Point在地图中表示一个经度与纬度的交点。Polygon表示地图上的多边形区域,和Airglass.js中的Polygon类类似,由一系列Point构成的闭合区域。LineString在地图上表示一条折线,也是由一系列的Point组成,就是不闭合的多边形。每一个几何特征都可以用JSON格式的对象表示,拿地图上的Point举例,一个Point特征的JSON这样表示:

{
  "type": "Feature",
  "properties": {},
  "geometry": {
    "type": "Point",
    "coordinates": [117.0703125, 59.355596110016315]
  }
},

“无”蕴含无限的可能。上面表示Point几何特征JSON片段中,最神奇的莫过于空空如也properties属性,看似无用,实则有大用。开发者只需在这里发挥奇思妙想描述该几何特征。虽然可用的几何特征仅有3种,但这3种几何特征无所不包。点、线、面是最高的抽象概念,它们可以表示的实际意义有无限种。这都要在properties对象中描述,任意地按照实际需要描述,一个简单的几何点可以有无限的内涵。

3D地图

threejs实现自定义地图与雷达波标记

本篇开局的GIF图是Airglass.js实现的2D地图加标记演示,下方是我用Three.js制作的3D地图加标记演示。两种实现方式所使用的地理特征数据都是相同的。我个人更喜欢3D的更显形式,这也坚定了我打算使用2D负责交互+3D负责数据驱动的FUI风格界面呈现想法。

虽然我借鉴geojson.io的真实地图绘制虚拟地图,不过这里我推荐两个或者说权威或者说比较知名的地图下载网站。一个是中国的标准地图服务网站http://bzdt.ch.mnr.gov.cn,提供中国地图、世界地图和自助制图功能。再一个是naturalearthdata的网站http://naturalearthdata.com。

说到Airglass.js的API的改进,我又新增了Airglass类。在前端中,Airglass表示一个维护Glass的DOM容器。基于封装的思想,我减少了暴露给开发者的类,更多的不常用到的类交给Airglass.js中更有实际用途的类维护。比如RendererManager类不再需要开发者自己创建,而有Airglass的实例维护。

动效进度

流光动效表示NodeLink节点间连接顺序

回忆一下过去的两个Airglass.js最佳实践,第一个是多边形标注工具,第二个是编辑节点关联工具。第一个最佳实践中没有使用到动画动效。在第二个最佳实践中,节点之间通过贝塞尔曲线将输出端口与输入端口想连接,我为连线增加了流光动效,看起来像是电流从电线中通过,直观的说明节点之间的连接顺序。

一套视觉动效的算法应该具备描述动画任何时间点的状态。就拿节点实践中的流光动效来说,我设计的动效算法应该具备描述流光从阶段的输出端口到另一个节点的输入端口之间全部状态的能力。动画总是一帧一帧的渲染,将这些帧串联起来播放便形成流畅的动画。设定帧播放的速度就需要时间的支持。所以说,用于渲染动效的算法应该加入时间维度,在时间流失的过程中渲染出每一帧。理论上,在算法驱动的视觉动效中,在动效还没有开始播放之前就能计算出任何时间点上物体的动效状态。

我增加了Progress类和AlterProgress类用来表示动效的进度。描述进度需要的数据元素包括,状态的起始与终止范围、状态变化步长、初始化状态。我在实际应用进度类的实践中,发现进度折返也是经常需要用到的功能。后来我想到我现在做的关于描述动效的工作和CSS3中@keyframes定义动画的能力很相似。所以我后面会借鉴CSS3中animation和transition属性完善Airglass.js库中的动效。

请使用Github账号登录留言
发布日期 » 2019年10月4日 周五
原创声明 » 请勿复制转载,谢谢配合。
🌈找工作【HTML5/数据可视化创新界面设计与开发/Web3D/新媒体艺术】兼具技术探索与艺术创意的职位。希望职位具备与员工能力相匹配的薪酬待遇、晋升空间与成长机会。已离职,目前在石家庄居住,工作城市不限。合适细聊。
陈帅华的微信二维码