大屏适配各分辨率屏幕方案及整合动画性能

每个公司都不可避免会有一些数据可视化的需求，大数据时代，更是一发不可收拾，各种花里胡哨的大屏效果，让前端既烦恼又有些许刺激，刺激是新的挑战带来的，完成了各种风骚的展示效果，那种成就感让人身心愉悦。。。
近日笔者也刚从一个大屏项目中展缓一口气，抽时间将遇到的坑，及一些问题的解决方案记录一下。

问题一：得到的大屏尺寸与实际大屏尺寸有出入

大屏的第一个难点在于，还原 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 特性。
而动画执行时间，则是在全局设置一个变量，各个模块在页面加载时统一获取并执行动画任务。

笔者：本来在开发完成时，就准备把相关坑及解决方案整理出来，但文档、截图涉及一些公司机密，久久未能发布，目前就把能分享的与大家分享吧