createjs技术博客

/------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帧了。