首页 > 其他分享 >大屏适配各分辨率屏幕方案及整合动画性能

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

时间:2024-09-04 10:21:24浏览次数:12  
标签:动画 缩放 适配 分辨率 开发 大屏 页面

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

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

大屏的第一个难点在于,还原 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

相关文章

  • 腾讯提出一种新的针对风格化角色和逼真服装动画的生成3D运动转移方法,生成效果逼真!
    来自腾讯XR视觉实验室的研究团队提出了一种创新的3D运动转移方法,专门针对风格化角色和逼真服装动画的生成。该方法能够将源动作准确地映射到目标角色上,同时考虑了角色身体的刚性变形和服装的局部物理动态变形。与现有技术相比,这技术不仅关注于角色身体的变形,还特别强调了服装的逼真......
  • 基于VUE2-dataV和echarts实现的可视化大屏,百分比适配PC端
    可视化平台中,数据分别通过仪表盘、环状图、柱形图、曲线图、滚动表格等多种形式展示数据变化。可视化平台大致分为左、中、右三部分,左侧由能耗总览、耗能占比、库存预警构成,中间由数据总览、销售计划完成率构成,右侧由销售统计、销售排名(TOP8)、生产统计构成。平台右上角动态......
  • 《第三十四章 高级主题 - 动画效果》
    在Android应用开发中,动画效果能够显著提升用户体验,使应用更加生动和吸引人。本章将深入探讨Android中的动画效果,包括属性动画、帧动画以及ViewPager动画。一、属性动画(一)属性动画简介属性动画是Android中一种强大且灵活的动画机制,它可以对对象的任意属性进行动......
  • FormCreate低代码设计器怎么实现PC、移动端多端适配
    FormCreate支持将PC端设计的 ElementPlus 表单规则在移动端渲染为VantUI风格的表单,提供了一致的用户体验,并确保在不同设备上都能良好展示。功能演示编辑功能概述通过多端适配功能,您可以确保在不同设备上的表单显示效果一致。无论是在PC端还是移动端,表单都能根据设备类型自动......
  • CSS-transition过渡动画【看这一篇就够了!!】
    目录transition过渡动画transition基本语法用法实际应用可参与过渡的属性不能参与过渡的属性all特殊属性定义多个过渡动画过渡的四个小属性时间函数时间函数的预设值常用参数贝塞尔曲线transition过渡动画实战案例鼠标滑动,背景从透明到半透明的效果鼠标滑动文......
  • 基于Vue的低代码,6K star的可视化表单设计器工具,多端适配
    FormCreate 是一款基于Vue的低代码可视化表单设计器工具,它通过数据驱动的方式实现了表单的动态渲染。用户仅需通过直观的界面即可快速构建出功能完备的表单。FormCreate 的主要特性包括:多端适配:支持PC和移动设备,内置丰富的插件和强大的功能。国际化:提供中文、英文、......
  • python毕业设计-基于大数据爬虫+数据可视化大屏+Python的广东省人口流动数据分析设计
    博主介绍:✌️码农一枚,专注于大学生项目实战开发、讲解和毕业......
  • Pyecharts可视化数据大屏分析文章
    Pyecharts可视化数据大屏分析文章引言随着大数据时代的到来,数据可视化成为企业决策、业务分析不可或缺的一部分。Pyecharts,作为一个基于Python的开源数据可视化库,以其丰富的图表类型和强大的功能,成为制作数据大屏的理想工具。本文将结合具体案例,分析如何使用Pyecharts实现数......
  • Typora 适配高版本 Mermaid
    Typora适配高版本Mermaid查看Mermaid版本info下载最新的mermaid.min.js文件在搜索框输入CDNhttps://cdn.jsdelivr.net/npm/mermaid@11/替换Typora的window.html文件<script> constinterval=setInterval(()=>{ console.log('checkmermaid...'); if......
  • 【HTML】开源模拟输入框动画
    代码地址:https://uiverse.io/eslam-hany/strange-goose-48代码地址:https://uiverse.io/vnuny/moody-swan-60代码地址:https://uiverse.io/boryanakrasteva/hard-pig-16代码地址:https://uiverse.io/Harsha2lucky/lovely-firefox-67代码地址:https://uiverse.......