首页 > 网站建设 >

网站建设怎么进行动画优化

发布时间:2019-10-17 作者:网站建设

  网站建设公司怎么进行动画优化,目前,移动设备上一般使用60Hz的屏幕刷新率。因为移动设备对于功耗的要求更高,要提高手机屏幕的刷新率,对于手机来说,逻辑功耗会随着频率的增加而线性增大,同时更高的刷新率意味着更短的数据写入时间,对屏幕设计来说难度更大。因此,如果在页面中有一个动画或渐变效果,或是用户正在滑动页面,那么浏览器渲染动画或页面的每一帧的速率也需要跟设备屏幕的刷新率保持一致。
  也就是说,浏览器对每一帧画面的渲染工作需要在16毫秒(1/60秒=16.66毫秒)之内完成。但实际上,在渲染某一帧画面的同时,浏览器还有一些额外的工作要做(如渲染队列的管理、渲染线程与其他线程之间的切换等处理)。因此单纯的渲染工作,一般需要控制在10毫秒之内完成,才能达到流畅的视觉效果。如果超过了这个时间限度,页面的渲染就会出现卡顿效果,形成很糟糕的用户体验。
  在介绍动画优化之前,我们先讨论一下渲染类型。渲染类型是指该类型的主要功能是在渲染HTML结构上,也就是在结构上加上各种颜色和尺寸等。可以说CSS的一大部分功能做的都是这些事情。渲染类型按照不同的角度可以分为很多种类型,从维度上区分可分为2D渲染和3D渲染。
1.2D渲染
  绝大多数的CSS属性都属于2D渲染。由于在CSS3中加入大量的有用的2D渲染的属性,以前需要使用图片才能实现的效果现在通过CSS的设置也可以实现。
2.3D渲染
  3D渲染是非常有用和酷炫的,能将页面上的元素进行3D渲染,实现各种非常炫酷的效果。不过由于其非常先进,所以能支持3D属性的机型、版本、厂商也会有很多的不同。因此这里说3D并不是要使用3D里面的属性,而是使用其特性。
动画是CSS3中一个比较有用的、可以实现节点的动画效果,配合JavaScript,可以让动画变得非常丰富。不过在如何正确使用动画上需要处处小心,最关键的是性能问题。
  有很多在PC上没有的性能问题属性一旦到了手机上就会变得非常明显,其中使用动画就常常会遇到这种问题。网页的DOM特性使动画非常耗能,再加上网页是单进程单线程的,因此所有的程序运行都会在一个线程里运行。手机上的性能还没有达到PC上的性能,因此动画的性能问题在手机上显得异常突出。如果要彻底提高性能,现在一个可能的方案是使用webworker,建立多线程的方式。不过支持webworker的手机并不是很多。
  在使用JavaScript实现动画时,建议合理使用requestAnimationFrame。其优点是能解决脚本问题引起的卡顿问题,并且支持中间状态的监听。深圳网站建设公司本文关于“网站建设怎么进行动画优化”的知识就介绍分享到这里,谢谢关注,博纳网络编辑整理。
文章标题:网站建设怎么进行动画优化
本文地址:https://www.198bona.com/news/4304.html
如果您觉得案例还不错请帮忙分享:

网站建设

网络推广

解决方案

域名主机

建站行业资讯