V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
wdspro
V2EX  ›  Android

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

  •  
  •   wdspro · 2021-01-20 11:26:14 +08:00 · 8916 次点击
    这是一个创建于 1394 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    18 条回复    2021-01-20 17:13:08 +08:00
    1OF7G
        1
    1OF7G  
       2021-01-20 13:35:21 +08:00 via iPhone
    根据时间在 requestAnimationFrame 计算下一帧的位置大小等参数,而不是根据调用次数每次 currentpos.x+2px 这样根据当前帧修改
    muzuiget
        2
    muzuiget  
       2021-01-20 13:36:00 +08:00
    requestAnimationFrame 本来就是那样用的,你应该在回调函数里取那个时间参数,然后根据时间差来计算绘图速度。
    soulmt
        3
    soulmt  
       2021-01-20 13:42:58 +08:00
    固定的 fps 是不存在的.... requestAnimationFrame 只是让你一帧改一次, 你可以使用 requestIdleCallback 来控制你每一次渲染和时间之间的关系,就算是高刷,那么无非每一帧变化的值小了,但是离你真正预设的动画时间和距离,不会发生改变,就比如你本来 60fps 的时候一次走 10px,高刷在 120fps 的时候一次只走 5px,
    fengjianxinghun
        4
    fengjianxinghun  
       2021-01-20 14:19:58 +08:00   ❤️ 1
    按帧率计算逻辑 ×
    按时间计算逻辑 √

    帧率无关动画
    wdspro
        5
    wdspro  
    OP
       2021-01-20 14:39:12 +08:00
    @1OF7G 现在的动画就是这样的 每回调一次 x + speed 来渲染动画 导致高刷新率的时候速度快 性能差的手机 fps 低的时候一卡一卡的

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

    @soulmt 是要先算出 fps 然后 再根据 fps 来算每帧需要走的距离是吗
    fengjianxinghun
        6
    fengjianxinghun  
       2021-01-20 16:22:36 +08:00
    @wdspro 你要忘记有 FPS 这个东西,当他不存在。
    wdspro
        7
    wdspro  
    OP
       2021-01-20 16:38:12 +08:00
    @fengjianxinghun 通过上面帧间差的方式实现了不同刷新率下速度相同的实现 现在更多的问题是会不必现的直接卡死几秒钟 就是两帧之间间隔 5~6s 钟 canvas 的性能这么差吗 还是说有其他的优化项没有做到 最开始的每帧清空画布 主要就是用的这个 drawImage 文中有提到坐标去浮点 但是这个是 10 年前的了 不知道 canvas 有没有针对优化 https://seblee.me/2011/02/html5-canvas-sprite-optimisation/
    wdspro
        8
    wdspro  
    OP
       2021-01-20 16:41:13 +08:00
    也尝试了在所有素材开始游戏前的 部分预渲染
    fengjianxinghun
        9
    fengjianxinghun  
       2021-01-20 16:45:26 +08:00
    @wdspro

    canvas 性能在几种技术中是最差的。
    替代选择
    1. css 动画
    2. webgl
    wdspro
        10
    wdspro  
    OP
       2021-01-20 16:56:38 +08:00
    @fengjianxinghun 这样的吗 选型技术的时候 最开始就是舍弃了 css3 webgl 适合做小游戏吗 有合适案例吗
    soulmt
        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 , 这个时间是浏览器给你的时间,可以不用管具体帧数是多少。
    fengjianxinghun
        12
    fengjianxinghun  
       2021-01-20 16:59:48 +08:00
    @wdspro 5 年前做 h5 手游的时候,当时 webgl 普及率不高,引擎是纯 canvas 写的慢的要死,部分内容就用 html/css3 动画代替优化。webgl 做 3d 游戏都够了何况小游戏。
    wszgrcy
        13
    wszgrcy  
       2021-01-20 17:02:23 +08:00
    @fengjianxinghun 但是 webgl 也是绘制在 canvas 上的.....你指的是默认的那种 canvas context 2d 的吗?
    fengjianxinghun
        14
    fengjianxinghun  
       2021-01-20 17:02:55 +08:00
    @wszgrcy
    fengjianxinghun
        15
    fengjianxinghun  
       2021-01-20 17:04:11 +08:00
    @wdspro 找个成熟 h5 游戏引擎吧,比如 cocos 之类的。
    wdspro
        16
    wdspro  
    OP
       2021-01-20 17:08:06 +08:00
    @wszgrcy 是的 context 2d 的

    @soulmt 是的 现在是按照这样的思路达到了 所有刷新率一个速度值了 但是现在就是性能有问题 会爆掉的样子 两个帧之间 有时候会达到几秒钟 在等下一次渲染的时候我的页面状态是直接卡住的 现在其实就只用到了 ctx.drawImage 同屏一个背景图 几个道具 加人物动态图在渲染 我想不出是需要优化什么地方 图已经压缩到极限了
    wdspro
        17
    wdspro  
    OP
       2021-01-20 17:08:52 +08:00
    @fengjianxinghun 有考虑 但是现在已经到了快验收阶段了 一时间想着先优化过去 暂时没时间折腾了 只能后面有时间研究研究了
    fengjianxinghun
        18
    fengjianxinghun  
       2021-01-20 17:13:08 +08:00
    @wdspro 背景图之类的静态部分能用 html 的就用 html,不要用 ctx.drawimage 每帧 draw

    webgl 可以 batch draw 节约 drawcall count,context 2d 不行。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1101 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 22:43 · PVG 06:43 · LAX 14:43 · JFK 17:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.