专栏首页dodott的专栏盒子端 CSS 动画性能提升研究
原创

盒子端 CSS 动画性能提升研究

不同于传统的 PC Web 或者是移动 WEB,在客厅盒子端,接大屏显示器下,许多能流畅运行于 PC 端、移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意。

基于此,对于 Web 动画的性能问题,仅仅停留在感觉已经优化的OK之上,是不够的,想要在盒子端跑出高性能接近 60 FPS 的流畅动画,就必须要刨根问底,深挖每一处可以提升的方法。

流畅动画的标准

理论上说,FPS 越高,动画会越流畅,目前大多数设备的屏幕刷新率为 60 次/秒,所以通常来讲 FPS 为 60frame/s 时动画效果最好,也就是每帧的消耗时间为 16.67ms。

直观感受,不同帧率的体验

帧率能够达到 50 ~ 60 FPS 的动画将会相当流畅,让人倍感舒适;

帧率在 30 ~ 50 FPS 之间的动画,因各人敏感程度不同,舒适度因人而异;

帧率在 30 FPS 以下的动画,让人感觉到明显的卡顿和不适感;

帧率波动很大的动画,亦会使人感觉到卡顿。

盒子端动画优化

在客厅盒子端,Web 动画未进行优化之前,一些复杂动画的帧率仅有 10 ~ 30 FPS,卡顿感非常明显,带来很不好的用户体验。

而进行优化之后,能将 10 ~ 30 FPS的动画优化至 30 ~ 60 FPS,虽然不算优化到最完美,但是当前盒子硬件的条件下,已经算是非常大的进步。

盒子端 Web 动画性能比较

首先先给出在盒子端不同类型的Web 动画的性能比较。经过对比,在盒子端 CSS 动画的性能要优于 Javascript 动画,而在 CSS 动画里,使用 GPU 硬件加速的动画性能要优于不使用硬件加速的性能。

所以在盒子端,实现一个 Web 动画,优先级是:

GPU 硬件加速 CSS 动画 > 非硬件加速 CSS 动画 > Javascript 动画

动画性能上报分析

要有优化,就必须得有数据做为支撑。对比优化前后是否有提升。而对于动画而言,衡量一个动画的标准也就是 FPS 值。

所以现在的关键是如何计算出每个动画运行时的帧率,这里我使用的是 requestAnimationFrame 这个函数近似的得到动画运行时的帧率。

原理是,正常而言 requestAnimationFrame 这个方法在一秒内会执行 60 次,也就是不掉帧的情况下。假设动画在时间 A 开始执行,在时间 B 结束,耗时 x ms。而中间 requestAnimationFrame 一共执行了 n 次,则此段动画的帧率大致为:n / (B - A)。

核心代码如下,能近似计算每秒页面帧率,以及我们额外记录一个 allFrameCount,用于记录 rAF 的执行次数,用于计算每次动画的帧率 :

var rAF = function () {

return (

window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

function (callback) {

window.setTimeout(callback, 1000 / 60);

}

);

}();

var frame = 0;

var allFrameCount = 0;

var lastTime = Date.now();

var lastFameTime = Date.now();

var loop = function () {

var now = Date.now();

var fs = (now - lastFameTime);

var fps = Math.round(1000 / fs);

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • mybatis

    MyBatis 是一款优秀的持久层框架,它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集...

    dodott
  • python--线程同步原语

    Threading模块是python3里面的多线程模块,模块内集成了许多的类,其中包括Thread,Condition,Event,Lock,Rlock,Sem...

    dodott
  • 数组去除重复元素方法

    for (int j = list.size() - 1; j > i; j--)这里报空指针异常

    dodott
  • iOS学习——核心动画

      Core Animation(核心动画)是一组功能强大、效果华丽的动画API,无论在iOS系统或者在你开发的App中,都有大量应用。核心动画所在的位置如下图...

    mukekeheart
  • 【iOS开发】iOS 动画详解

    在移动开发中,为了提高用户体验,会用到一些动画来提高应用的视觉效果。让人有眼前一亮的感觉。同时有动画的过渡过程,会让应用看起来不是那么的生硬,更吸引用户。

    吴老师
  • [Android技术专题]动画那点小秘密

    在Android应用开发中我们每天都在接触动画(Activity开、关,页面滑动、点击按钮等都有动画效果),但入门容易,真正做好很难。如果要把效果做得自然、看...

    open
  • Web高性能动画及渲染原理(1)CSS动画和JS动画

    Web动画的本质是元素状态改变造成的样式变更,CSS动画和JS动画的区别并不是由语言来决定的,而是由两者的特点和适用场景来判断的。CSS动画简洁高效,提升交互体...

    大史不说话
  • Flutter动画【1】

    在前面的文章中我们花了很多的时间去讲了Flutter中的Widget以及用户操作,但是我们却很少去关注与用户的交互效果,当然这并不会导致我们的程序崩溃或者不能实...

    flyou
  • 中国第五届CSS大会分享:CSS TIME

    懵懂少年有幸受邀参加3.30中国第五届CSS大会分享,感谢业界大咖的不嫌弃,鉴于CSS的更新频率不及JS各种迭代高,新的特性组织起来对于分享的主题会比较散,所以...

    腾讯技术工程官方号
  • Unity3D--Mecanim动画系统(三)-动画层Layers

    其实在新版的动画状态机中,大量的技巧已经让一般的小白晕头转向了。而且就目前来说:使用状态机的单一层动画就已经可以满足日常开发需要。那么为什么出现层的概念呢? ...

    雷潮

扫码关注云+社区

领取腾讯云代金券