可视化动效与金融产品功能的对应关系分析

2D动效

时间趋势变化(时间轴)

一般用于展示某些数据随着时间变化而产生的变化，比如中国近年宏观经济数据的变更，还有这个

关系图谱

通过节点与线条来表示关系，类似这样的效果。像企业关联关系、高管关系等，都很适合这种展现形式。目前市面上的企查查已经在应用了，我们的企业图谱也在使用这种效果，用的技术是vis.js。

流程

通过动画效果展示某个事件的发展过程，类似这样的效果。比如并购重组就很适合做成流程动画。

另外像我们ifind里面的产业链，也是一种流程展示动画。

数据流向

这其实是将桑基图动画后的结果，很适合展示一些流动的数据，比如陆港通的资金流向。目前这块还没有产品化，是一个可视化的需求点。

实时监控

一个典型的应用就是选股宝的智能盯盘，通过动态散点图来监控市场热点的变化。

这个其实针对盯盘类的功能，是有很多点可以做可视化的。当然各种监控系统应用得也比较多，比如线上服务器的监控、城市拥堵情况的监控等等。

常用的展现形式有动态仪表盘、动态饼图、热力地图、飞线地图等等

3D动效

3D动效看起来很炫酷，但是在实际产品应用中，却并非是一个好的选择，甚至有的情况加入3D效果还会起到副作用。详见这个文章。一般只有当我们需要展示某个物品的实际三维结构时，才会用到3D效果，而这种应用场景在金融产品中很少见，多见于工业设计领域。金融产品中，应用3D最多的场景，是和地域、地图相关的需求，而且即使是这种需求，3D也并非是不可获取的，用2D展示也不会带来理解上的减弱。

3D动画主要分两大类，一类是摄像机的运动或变化，引起画面的变化，还有一类是画面中元素本身的数据变化引起的视觉效果变化。

目前的网页3D效果一般都是通过WebGL技术来实现的，常用的开源底层引擎框架有three.js、SceneJS、PhiloGL、Babylonjs等。

WebGL对于用户浏览器有比较高的要求，仅能够在Chrome、Firefox、IE10+等现代浏览器上才能有较好的表现。得益于我们17年的客户端内嵌浏览器升级，目前我们PC用户大约有82%是符合WebGL的浏览器展示条件的(注意这里没有考虑硬件条件，实际能较好应用3D效果的用户，会低于这个百分比)。

WebGL对于用户的硬件配置也有一定要求，由于硬件条件有限，这一块我们没有做详尽的测试，但是在集成显卡中的表现确定是非常差的，存在严重的卡顿延时。