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

本文主要是介绍大屏适配各分辨率屏幕方案及整合动画性能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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

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