选择RAF模式还是RAF_SYNCHED模式?

  • 内容
  • 评论
  • 相关

/------2022.10.28更新----/

如果你做pc端我现在强烈建议用RAF_SYNCHED,因为我看到了i9处理器跑到了140帧!也就是好的电脑可能会使动画速度会的非常快,从而达不到自己预期想要的动画效果。所以建议pc端RAF_SYNCHED锁60帧

/--------------------------/

好久不更新文章了,再不更新很多童鞋要怀疑我是不是不维护了…… 那么今天就来讲讲requestAnimationFrame在createjs中是选择RAF模式还是RAF_SYNCHED模式。

首先我们先讲讲requestAnimationFrame,requestAnimationFrame也就是定时器,但是比settimeout这种快了不少,原因是他用了帧,也就是系统时间,而不是真实的时间。这样就可以保持最佳绘制效率,不会因为间隔时间过短,造成过度绘制,增加开销;也不会因为间隔时间太长,使用动画卡顿不流畅,让各种网页动画效果能够有一个统一的刷新机制,从而节省系统资源,提高系统性能,改善视觉效果(详细情况百度搜requestAnimationFrame)

然后我们讲讲createjs怎么开启requestAnimationFrame,开启requestAnimationFrame主要就是设置

createjs.Ticker.timingMode =  createjs.Ticker.RAF_SYNCHED或者createjs.Ticker.timingMode =  createjs.Ticker.RAF;那么问题来了,RAF模式和RAF_SYNCHED模式有什么区别?先来讲讲RAF吧,RAF就是直接用帧也就是系统时间来代替计时器,这样设备就自动满帧,所以你也不用设置帧频,开了RAF后你的设备能跑多快就跑多快,现在web浏览器满帧都是60,也就是直接跑到60帧,当然你的程序很卡或者设备不行也是跑不到60帧的,但是也可以帮你跑到系统容许内的最快速度。但这也会带来问题,第一,如果你不想60帧或者你想帧频经常改的就不行了,第二,如果你的程序时而耗性能时而不耗,用户帧频会感到明显的改变。第三,统一程序在不同的性能的设备上性能差别巨大。再来讲讲RAF_SYNCHED,使用RAF_SYNCHED模式你就在开启requestAnimationFrame的同时,自由的调整帧频了。但是也有问题,因为他的底层机制他的帧频只能调到60的约数左右,也就是10, 12, 15, 20, 30。60也是约数但是不考虑,因为60的话你就不如用RAF模式了。一但帧频掉到约数下面,帧数会一下子降很多,比如RAF_SYNCHED下你的帧频设置60,实际跑到55左右,这时候你的帧频会直接掉到下一个约数,也就是30 - 40。这时候有人会问了,为什么不是30而是30-40,因为底层机制会帮你补点起来但不会很多,而且会感觉到一顿一顿,因为补充机制帮你补充的次数是一次性跑出来的。

那么我们应该怎么选择呢?本人以前是用RAF_SYNCHED模式的,当时的想法是首先我很多项目要在中低端设备上跑的,他们肯定跑不到60,而且就算跑到60cpu或者gpu也可能会很热,所以干脆就设置RAF_SYNCHED用30帧,至于掉级的问题只需要帧频多设置一些可以避免,比如你60帧设置65帧,30帧设置35帧。但是近几个月来我的项目基本都使用RAF模式了,经常看我博客demo的小伙伴肯定也发现了,为什么呢?首先30帧和60帧视觉上差距比想象的大,特别是别的厂出60帧的H5,你出30帧的H5,一下子就感觉很low。其次,不能因为要兼容低端机就统一把帧频降下来,这好比要共同富裕,就把大家一起变穷一样。最后,纯RAF模式速度真的挺快的。

所以requestAnimationFrame在createjs中是选择RAF模式还是RAF_SYNCHED模式,结论是60帧你就选择RAF模式,30帧就选择RAF_SYNCHED,但是记得加几帧,比如设置35帧不然性能一但掉下来30帧就变20帧了。

dashang.jpg

评论

0条评论

发表评论

电子邮件地址不会被公开。