本文主要是介绍大屏适配各分辨率屏幕方案及整合动画性能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
每个公司都不可避免会有一些数据可视化的需求，大数据时代，更是一发不可收拾，各种花里胡哨的大屏效果，让前端既烦恼又有些许刺激，刺激是新的挑战带来的，完成了各种风骚的展示效果，那种成就感让人身心愉悦。。。
近日笔者也刚从一个大屏项目中展缓一口气，抽时间将遇到的坑，及一些问题的解决方案记录一下。
问题一：得到的大屏尺寸与实际大屏尺寸有出入
大屏的第一个难点在于，还原 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 特性。
而动画执行时间，则是在全局设置一个变量，各个模块在页面加载时统一获取并执行动画任务。
笔者：本来在开发完成时，就准备把相关坑及解决方案整理出来，但文档、截图涉及一些公司机密，久久未能发布，目前就把能分享的与大家分享吧
这篇关于大屏适配各分辨率屏幕方案及整合动画性能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
