安卓能对浏览器刷新率锁帧吗 h5 requestAnimationFrame 动画会随着刷新率改变速度

[wdspro]

如题 一个安卓 h5 内置的动画 用到了 requestAnimationFrame 遇到高刷手机 特别是设置了 动态高刷的设置 在屏幕按压的时候自动进入高刷 然后页面动画就变速了 想问下有没有能限制 或 锁住应用刷新率的 又或者是 h5 有没有固定 fps 的 感谢

[1OF7G]

根据时间在 requestAnimationFrame 计算下一帧的位置大小等参数，而不是根据调用次数每次 currentpos.x+2px 这样根据当前帧修改

[muzuiget]

requestAnimationFrame 本来就是那样用的，你应该在回调函数里取那个时间参数，然后根据时间差来计算绘图速度。

[soulmt]

固定的 fps 是不存在的.... requestAnimationFrame 只是让你一帧改一次, 你可以使用 requestIdleCallback 来控制你每一次渲染和时间之间的关系，就算是高刷，那么无非每一帧变化的值小了，但是离你真正预设的动画时间和距离，不会发生改变，就比如你本来 60fps 的时候一次走 10px，高刷在 120fps 的时候一次只走 5px，

[fengjianxinghun]

按帧率计算逻辑 ×
按时间计算逻辑 √

帧率无关动画

[wdspro]

@1OF7G 现在的动画就是这样的 每回调一次 x + speed 来渲染动画 导致高刷新率的时候速度快 性能差的手机 fps 低的时候一卡一卡的

@muzuiget 具体可以讲一下吗 时间差是指的什么时间差

@soulmt 是要先算出 fps 然后 再根据 fps 来算每帧需要走的距离是吗

[fengjianxinghun]

@wdspro 你要忘记有 FPS 这个东西，当他不存在。

[wdspro]

@fengjianxinghun 通过上面帧间差的方式实现了不同刷新率下速度相同的实现 现在更多的问题是会不必现的直接卡死几秒钟 就是两帧之间间隔 5~6s 钟 canvas 的性能这么差吗 还是说有其他的优化项没有做到 最开始的每帧清空画布 主要就是用的这个 drawImage 文中有提到坐标去浮点 但是这个是 10 年前的了 不知道 canvas 有没有针对优化 https://seblee.me/2011/02/html5-canvas-sprite-optimisation/

[wdspro]

也尝试了在所有素材开始游戏前的 部分预渲染

[fengjianxinghun]

@wdspro

canvas 性能在几种技术中是最差的。
替代选择
1. css 动画
2. webgl

[wdspro]

@fengjianxinghun 这样的吗 选型技术的时候 最开始就是舍弃了 css3 webgl 适合做小游戏吗 有合适案例吗

[soulmt]

@wdspro fps 不用管， 每一帧渲染浏览器会通过 requestIdleCallback 告诉你这一帧还有多少时间是空闲的，比如浏览器处理 5ms 那么在 60 帧的时候，你能拿到的时间分片就是 11.7ms ， 如果是 120 帧的话，你拿到的时间可能是 3.3ms ，那么，假设你的动画是走 100px 需要 100ms，那么速度就是 1px/ms， 那么在上述条件下，如果给你 11.7ms 那么你就走 11.7px ，在 120 帧的时候给你 3.3ms 你就走 3.3px ， 这个时间是浏览器给你的时间，可以不用管具体帧数是多少。

[fengjianxinghun]

@wdspro 5 年前做 h5 手游的时候，当时 webgl 普及率不高，引擎是纯 canvas 写的慢的要死，部分内容就用 html/css3 动画代替优化。webgl 做 3d 游戏都够了何况小游戏。

[wszgrcy]

@fengjianxinghun 但是 webgl 也是绘制在 canvas 上的.....你指的是默认的那种 canvas context 2d 的吗?

[fengjianxinghun]

@wszgrcy 对

[fengjianxinghun]

@wdspro 找个成熟 h5 游戏引擎吧，比如 cocos 之类的。

[wdspro]

@wszgrcy 是的 context 2d 的

@soulmt 是的 现在是按照这样的思路达到了 所有刷新率一个速度值了 但是现在就是性能有问题 会爆掉的样子 两个帧之间 有时候会达到几秒钟 在等下一次渲染的时候我的页面状态是直接卡住的 现在其实就只用到了 ctx.drawImage 同屏一个背景图 几个道具 加人物动态图在渲染 我想不出是需要优化什么地方 图已经压缩到极限了

[wdspro]

@fengjianxinghun 有考虑 但是现在已经到了快验收阶段了 一时间想着先优化过去 暂时没时间折腾了 只能后面有时间研究研究了

[fengjianxinghun]

@wdspro 背景图之类的静态部分能用 html 的就用 html，不要用 ctx.drawimage 每帧 draw

webgl 可以 batch draw 节约 drawcall count，context 2d 不行。