安卓能对浏览器刷新率锁帧吗 h5 requestAnimationFrame 动画会随着刷新率改变速度
wdspro · 2021-01-20 11:26:14 +08:00 · 9252 次点击这是一个创建于 1412 天前的主题，其中的信息可能已经有所发展或是发生改变。
如题 一个安卓 h5 内置的动画 用到了 requestAnimationFrame 遇到高刷手机 特别是设置了 动态高刷的设置 在屏幕按压的时候自动进入高刷 然后页面动画就变速了 想问下有没有能限制 或 锁住应用刷新率的 又或者是 h5 有没有固定 fps 的 感谢
 |
1
1OF7G 2021-01-20 13:35:21 +08:00 via iPhone
根据时间在 requestAnimationFrame 计算下一帧的位置大小等参数，而不是根据调用次数每次 currentpos.x+2px 这样根据当前帧修改
|
 |
2
muzuiget 2021-01-20 13:36:00 +08:00
requestAnimationFrame 本来就是那样用的，你应该在回调函数里取那个时间参数，然后根据时间差来计算绘图速度。
|
 |
3
soulmt 2021-01-20 13:42:58 +08:00
固定的 fps 是不存在的.... requestAnimationFrame 只是让你一帧改一次, 你可以使用 requestIdleCallback 来控制你每一次渲染和时间之间的关系，就算是高刷，那么无非每一帧变化的值小了，但是离你真正预设的动画时间和距离，不会发生改变，就比如你本来 60fps 的时候一次走 10px，高刷在 120fps 的时候一次只走 5px，
|
 |
4
fengjianxinghun 2021-01-20 14:19:58 +08:00  1
按帧率计算逻辑 ×
按时间计算逻辑 √ 帧率无关动画 |
 |
5
wdspro OP |
|
6
fengjianxinghun 2021-01-20 16:22:36 +08:00
@wdspro 你要忘记有 FPS 这个东西，当他不存在。
|
|
7
wdspro OP @fengjianxinghun 通过上面帧间差的方式实现了不同刷新率下速度相同的实现 现在更多的问题是会不必现的直接卡死几秒钟 就是两帧之间间隔 5~6s 钟 canvas 的性能这么差吗 还是说有其他的优化项没有做到 最开始的每帧清空画布 主要就是用的这个 drawImage 文中有提到坐标去浮点 但是这个是 10 年前的了 不知道 canvas 有没有针对优化 https://seblee.me/2011/02/html5-canvas-sprite-optimisation/
|
|
8
wdspro OP 也尝试了在所有素材开始游戏前的 部分预渲染
|
|
9
fengjianxinghun 2021-01-20 16:45:26 +08:00
|
|
10
wdspro OP @fengjianxinghun 这样的吗 选型技术的时候 最开始就是舍弃了 css3 webgl 适合做小游戏吗 有合适案例吗
|
|
11
soulmt 2021-01-20 16:58:45 +08:00
@wdspro fps 不用管， 每一帧渲染浏览器会通过 requestIdleCallback 告诉你这一帧还有多少时间是空闲的，比如浏览器处理 5ms 那么在 60 帧的时候，你能拿到的时间分片就是 11.7ms ， 如果是 120 帧的话，你拿到的时间可能是 3.3ms ，那么，假设你的动画是走 100px 需要 100ms，那么速度就是 1px/ms， 那么在上述条件下，如果给你 11.7ms 那么你就走 11.7px ，在 120 帧的时候给你 3.3ms 你就走 3.3px ， 这个时间是浏览器给你的时间，可以不用管具体帧数是多少。
|
|
12
fengjianxinghun 2021-01-20 16:59:48 +08:00
@wdspro 5 年前做 h5 手游的时候，当时 webgl 普及率不高，引擎是纯 canvas 写的慢的要死，部分内容就用 html/css3 动画代替优化。webgl 做 3d 游戏都够了何况小游戏。
|
 |
13
wszgrcy 2021-01-20 17:02:23 +08:00
@fengjianxinghun 但是 webgl 也是绘制在 canvas 上的.....你指的是默认的那种 canvas context 2d 的吗?
|
|
14
fengjianxinghun 2021-01-20 17:02:55 +08:00
@wszgrcy 对
|
|
15
fengjianxinghun 2021-01-20 17:04:11 +08:00
@wdspro 找个成熟 h5 游戏引擎吧，比如 cocos 之类的。
|
|
16
wdspro OP |
|
17
wdspro OP @fengjianxinghun 有考虑 但是现在已经到了快验收阶段了 一时间想着先优化过去 暂时没时间折腾了 只能后面有时间研究研究了
|
|
18
fengjianxinghun 2021-01-20 17:13:08 +08:00
@wdspro 背景图之类的静态部分能用 html 的就用 html，不要用 ctx.drawimage 每帧 draw
webgl 可以 batch draw 节约 drawcall count，context 2d 不行。 |
Select Language