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

news2024/12/26 0:59:06

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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2103689.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

荆州农商行资产质量下行压力不减,参股多家银行均有股权被冻结

撰稿|芋圆 2023年,湖北荆州农商行的业绩表现不佳,营收、利润双降。其中,2023年的营收6.8亿元,延续2022年的下滑趋势,同比降幅4.06%;利润总额2.2亿元,同比下滑15%;净利润1.8亿元&…

新疆火炬燃气安康杯知识竞赛活动策划方案

以赛促学,以学促安。为深入贯彻落实国家安全生产法律法规,增强公司员工的安全意识和法律素养,6月28日,新疆火炬燃气股份有限公司举办2024年安全生产法律法规“安康杯”知识竞赛。28支队提前抽好PK对手,两两PK&#xff…

Nginx 负载均衡+高可用 集群部署(Keepalived+LVS DR模式)

一、LVS负载均衡简介 1.1 LVS基本介绍 LVS(Linux Virtual Server)即Linux虚拟服务器,是由章文嵩博士主导开发的开源负载均衡项目,目前LVS已经被集成在Linux内核中。该项目在Linux内核中实现了基于IP地址的请求数据负载均衡调度方…

【C语言从不挂科到高绩点】09-作业练习-循环结构02

Hello!彦祖们,俺又回来了!!!,继续给大家分享 《C语言从不挂科到高绩点》课程,前面课程中给大家讲解了一些常规的知识点,那么本次课,我们一起来练习挑战一下!! 本套课程将会从0基础讲解C语言核心技术,适合人群: 大学中开设了C语言课程的同学想要专升本或者考研的同…

年薪98w!产品人的新赛道,我决定入局!

现在做产品经理,真的挺累的。 现在产品越来越难做,晋升困难,工资迟迟不涨……公司裁员,产品经理首当其冲!! 做产品几年了,还没升职,就先到了“职业天花板”。 想凭工作几年积累的…

提升编程效率的秘密武器:精选编程工具解析

引言 在软件开发的世界里,时间就是金钱。选择合适的编程工具不仅可以帮助开发者节省时间,还能提高代码质量,优化团队协作。本文将深入探讨几款能够显著提升工作效率的编程工具,并分析它们的特点、使用场景以及如何帮助开发者提高…

数字人直播阿凡达模式2.0版本揭秘:灰豚运用了哪些黑技术?

随着数字人直播的应用频率不断提升,其在帮助企业降本增效方面的潜力也随之显现,刺激市场需求的同时,也让用户对它的期待值持续增长。在此背景下数字人源码厂商开始不断加大研发力度,以推动数字人直播技术的持续升级,数…

青少年护眼台灯哪个牌子好?五款质量好又专业的护眼台灯

现在的青少年学习压力很大,在学校课程已经塞满了大半天,课后的作业更是不少,空闲时间还需要去课后补习班的数不胜数。用眼的次数非常的高,眼睛很容易感到疲惫,这时候我们一个“宝贝”大有作用,就是我们的护…

【书生3.3】LMDeploy 量化部署进阶实践

LMDeploy 量化部署进阶实践 1、环境准备1.1 创建模型软链接1.2 LMdeploy部署验证 2、api接口服务2.1 启动API服务器2.1.1 以命令行形式连接API服务器2.1.2 以Gradio网页形式连接API服务器 2.2 LMDeploy Lite2.2.1 不设置kv2.2.2 设置kv2.2.3 设置**在线** kv cache int4/int8 量…

深度学习与电网信号故障诊断:基于卷积神经网络和残差网络的应用

在本文中,我们将探讨如何使用深度学习方法,特别是卷积神经网络(CNN)和残差网络(ResNet),来进行信号故障诊断。通过实践,我们将逐步演示如何加载数据、处理数据、建立模型并进行训练和…

axios设置responseType: ‘blob‘,获取接口返回的错误信息

在axios的请求中当后端接口返回的是文件流的情况下,我们需要在请求参数里面设置responseType: blob,如果接口报错,默认前端无法获取后端返回的错误信息。 解决方法:通过FileReader获取错误信息 async handleFetch() {const res aw…

59.以太网数据回环实验(2)硬件资源梳理及系统框图

硬件资源梳理介绍: 升腾开发板使用的以太网PHY芯片型号为RTL8211F,是低功耗10-BASE/100-BASE/1000-BASE全双工以太网PHY层芯片,支持 10Mbps、100Mbps 和 1000Mbps以太网通信。I/O 引脚电压可变,符合 IEEE802.3-2005 标准&#xff…

2024.09.04【读书笔记】|如何使用Tombo进行Nanopore Direct RNA-seq(DRS)分析

文章目录 Tombo快速使用介绍模型介绍RNA修饰分析步骤特异性替代碱基检测(推荐)De novo canonical model comparison ONT全长转录组分析步骤疑难解答Minimap2在比对nanopore直接RNA-seq数据时的最佳实践和参数设置有哪些?featureCounts在进行R…

--- 数据结构 栈 --- java

栈 只允许在一个方向上进行数据的插入和删除操作,进行删除和插入操作的一端叫做栈顶,另一端叫做栈尾 压栈 将数据插入到栈当中,入数据的位置是栈顶 出栈 将数据从栈中弹出(删除),弹出的方向是在栈顶 栈…

【持续更新】Adobe Audition 2024 (v24.4.1.003)最新免费修改版

Adobe Audition是一款专为录音、编辑和掌握音频素材设计的专业解决方案。此编辑器支持从MP3、AAC到AIFF等多种重要格式,并能从CD中导入音轨。 其多轨编辑功能使您可以在任意数量的轨道上混合音乐、语音和声音片段,运用丰富的工作室动态效果,如…

光盘安全隔离与信息单向导入系统-信刻

信刻从用户需求出发,为更多用户提供安全可靠的跨网数据单向导入/导出光盘摆渡系统解决方案,解决内外网数据交换的问题,确保数据交换过程的安全性。 公司所研发出的光盘安全隔离与信息单向导入系统依托软硬件相结合的技术,集策略摆…

实训day39(8.29)

一、harbor私有仓库管理 是python的包管理工具,和yum对redhat的关系是一样的 yum -y install epel-release yum -y install python2-pip pip install --upgrade pip pip list pip 8x pip install --upgrade pip pip install --upgrade pip20.3 -i https://mirr…

HTTP 之 消息结构(二十二)

HTTP(超文本传输协议)是一种用于传输超媒体文档的协议,它定义了客户端和服务器之间请求和响应的消息结构。HTTP消息由一系列标准头部字段、一个空行和可选的消息体组成。 客户端请求消息 请求消息包括以下格式:请求行(…

视频合并在线工具哪个好?好用的视频合并工具推荐

当我们手握一堆零散却各有千秋的视频片段时,是否曾幻想过它们能像魔法般合并成一部完整、流畅的故事? 别担心,今天咱们就来一场“视频合并大冒险”,揭秘几款视频合并软件手机免费工具,帮助你在指尖上实现创意无限的视…

进来一起把【数据结构】的【栈与队列】狠狠玩弄,痛快到大汗淋漓

1前言:顾名思义,栈与队列是两个东西,栈和队列!对的,栈和队列!!,没错,在念一遍,【栈】 和 【队列】!!!但是本质都是差…