每个公司都不可避免会有一些数据可视化的需求,大数据时代,更是一发不可收拾,各种花里胡哨的大屏效果,让前端既烦恼又有些许刺激,刺激是新的挑战带来的,完成了各种风骚的展示效果,那种成就感让人身心愉悦。。。
近日笔者也刚从一个大屏项目中展缓一口气,抽时间将遇到的坑,及一些问题的解决方案记录一下。
问题一:得到的大屏尺寸与实际大屏尺寸有出入
大屏的第一个难点在于,还原 UI 设计 并适配不同分辨率,我们开发时的流程一般都是:
开发者电脑开发 => 发到线上 => 大屏查看预览 ==> 有问题回到开发者电脑调试修改
而因为开发电脑与大屏分辨率的不同,展示的效果一言难尽,各种错位问题让开发者头疼不已,再加上与我们沟通的非 it 行业中的人员,告知的分辨率,与实际出入很大,开发时按照通知的 5760 * 2160 分辨率开发,开发完成后,却是 2880 * 1080 。。。
重新开发肯定来不及了,但又需要保证 UI 的还原度,我们则采取了按比例缩放的方案,来解决这个问题,例:
.page {
display: block;
width: 5760px;
height: 2160px;
background: #fff;
overflow: hidden;
transform: scale(.5) ;
box-sizing: border-box;
border: .5px solid transparent;
}
通过 css transform 设置 scale 属性达到等比例缩放,并且不会影响布局,比例计算方式为: 实际分辨率 / 开发的分辨率
设置缩放后,页面并没有居中,我们还需要调整页面位置,关键属性如下:
// 以下属性为了使页面居中
position: fixed;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
// 此属性为了保证缩放及转换元素位置时基点位置在左上角
transform-origin: 0 0;
效果如下:
问题二:大屏动效太多,页面性能变差
如上图:
标 1 : 数字需从0开始滚动增加到指定数值;
标 2 : 进度条滚动达到 100% ;
标 3 、标 4 :折线图执行动画效果递增;
标 5 : 横向图需执行动画从无到有
以上动效,还不算中间两个地图的动效,难点有两处,一是页面模块化,动画一致性不好调试,二是列表内的数值滚动,数据越多动效越多,页面也越卡。
此页面由多个小伙伴合作完成,使用的是 settimeout 或 setInterval 来实现各个模块的动画效果,由于settimeout(setInterval)的特性,定时器回调无法保证跟浏览器重绘时间重合,会导致某一帧没有绘制,直接绘制下一帧,出现跳跃、抖动的情况,俗称:卡了!
解决方案则是使用浏览器新特性 requestAnimationFrame ,它采用浏览器时间间隔 ,保持最佳绘制效率,不会因为间隔时间过短,造成过度绘制,消耗性能;也不会因为间隔时间太长,使用动画卡顿不流畅,这里使用到了一个开源库 gsap , 来执行数字的滚动增长,它的执行方式就是采用的 requestAnimationFrame 特性。
而动画执行时间,则是在全局设置一个变量,各个模块在页面加载时统一获取并执行动画任务。
标签:动画,缩放,适配,分辨率,开发,大屏,页面 From: https://blog.csdn.net/caperxi/article/details/130314289笔者:本来在开发完成时,就准备把相关坑及解决方案整理出来,但文档、截图涉及一些公司机密,久久未能发布,目前就把能分享的与大家分享吧