⼤屏可视化数据⾯板分格渐变进度条、数字翻牌器及其刷新动效实现
数据可视化⼤屏是当前可视化领域的⼀项热门应⽤，通常可以分为信息展⽰类、数据分析类及监控预警类。这类应⽤的视觉设计通常效果炫酷，动效丰富，有时候⼀些页⾯布局和动画实现会对前端⼈员有⼀定的挑战性，在这⾥分享⼀些⼤屏可视化应⽤数据⾯板实现过程中遇到的问题及其解决⽅案。
分格渐变进度条、数字翻牌器及其刷新动效实现
⼀、数据⾯板刻度尺效果、分格渐变数据条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，固定每⼀步动画花费时间就可以满⾜要求呢？于是⼜将代码改成了如下所⽰：
在查看实际页⾯效果后发现动画确实稳定性有所提升，但是仍较为⽣硬，想要更流畅⽣动的动画效果需配合缓动函数库，感觉稍显繁琐，且尝试下来感觉通过改变数据驱动视图变化的⽅案，不够轻量化。
>js控制css3动画触发

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。