大屏可视化数据面板分格渐变进度条、数字翻牌器及其刷新动效实现

数据可视化大屏是当前可视化领域的一项热门应用，通常可以分为信息展示类、数据分析类及监控预警类。这类应用的视觉设计通常效果炫酷，动效丰富，有时候一些页面布局和动画实现会对前端人员有一定的挑战性，在这里分享一些大屏可视化应用数据面板实现过程中遇到的问题及其解决方案。

一、数据面板刻度尺效果、分格渐变数据条css实现

在某个应用开发工作中，视觉设计了如下图的数据面板样式：

其中涉及到的分格渐变的数据条样式和面板下方的刻度尺样式一开始没有好的实现思路，用dom元素去构造每一个方格和刻度的方案显然是不合理的，这样做需要在页面中加入大量冗余dom，页面结构会非常臃肿。
这样一来，就只能想办法用css实现视觉稿的效果，查阅css3渐变的各个特性时，发现利用重复线性渐变repeating-linear-gradient这一属性能巧妙实现视觉稿中效果。组件Dom结构如下：

类名为process-wrapper的div元素作为进度条的容器，固定宽度，类名为process-bg的div表示进度条，宽度根据数值和量程计算出基于父元素的百分比，背景用线性渐变进行填充，类名为number的div显示数值，数值显示在进度条右上角，故number作为process-bg子元素，基于进度条进行absolute绝对定位，数值左边三角形用：after伪元素实现，css代码及列表效果如下：

接下来实现进度条分格效果，这时候就要用到repeating-linear-gradient这一css3特性，不需要对dom结构进行修改，直接在css代码process-bg下增加：before伪类，使用透明色和与背景色相同的颜色值重复填充满整个进度条，分格效果就出来了。Css代码和实现效果如下图所示：

二、数据刷新数据条加载动效实现

上述数据面板静态展示效果实现完后，发现由于大屏应用数据需要定时刷新，数据展示面板需要做刷新动效，即实现上述数据面板中数据条的加载动效。

由于css动画无法控制动画的启动和停止，首先考虑的方案是帧动画，定义一个合适的总帧数，在监听到数据变更后，启动帧动画，在每一帧内按比例给绑定数据赋值，在nextTick函数中调用下一帧，到最后一帧时页面绑定的数据就是变更之后的正确数据了，进度条的宽度是根据数值计算出来，这样页面就能达到数据逐步加载展开的效果，代码如下：


查看页面效果时，发现这种方案实现的动画不够流畅和稳定，进度条加载速度受到页面帧率影响，当页面中地图模块加载时，动画有明显卡顿或停滞，因此该方案未能达到要求。

而之所以出现上述这种情况，是由于动画执行过程中，其他模块加载导致页面帧生成时间不稳定，那是否将requestAnimation方法改成setInterval，固定每一步动画花费时间就可以满足要求呢？于是又将代码改成了如下所示：

在查看实际页面效果后发现动画确实稳定性有所提升，但是仍较为生硬，想要更流畅生动的动画效果需配合缓动函数库，感觉稍显繁琐，且尝试下来感觉通过改变数据驱动视图变化的方案，不够轻量化。

于是开始思考能否通过css动画配合js变量控制来达到要求的动画效果。给进度条div写上一个animation，这样宽度变化时就能出现动画效果，而我们只需要控制宽度的变更，及绑定的数据的变更。当监听到外部数据变更时，先将页面绑定数据值置零，让到开始位置，然后赋变更后的数据值，这样数据条能按指定缓冲动画效果加载。

再次查看页面效果，发现动画相比之前的方案流畅生动了很多，但是存在一个小问题，第二次触发刷新动画时，数据条由有数据至归零的过程中也存在动画效果，而我们只需要动画在由零加载至指定数值时出现动画，故再加上一个变量控制动画是否生效就可以了。

至此，数据条的加载动画已经实现，而且对于如何实现需要有效控制开始和停止的动画效果有了较理想的解决方案。

三、数字翻牌器刷新效果实现

利用上文描述的控制动画启停的方法，也可以实现类似数字翻牌器的数值滚动刷新效果。数字刷新滚动效果同样不采用不停给数据采样赋值的方案而采用css实现，需要用到css中的writing-mode和text-orientation属性来实现这一效果， 0~9的十个数字竖向排列在数值的每一个位的位置，通过transform属性定位的正确的数值位置，并将其他数字隐藏，实现原理如下所示：

实现代码如下所示：