收藏
回答

canvas 动画在真机上比较卡

setTimeout(function _rotate() {
      ctx.restore()
      ctx.translate(canvasInfo.width / 2, canvasInfo.height / 2)
      currentDeg += distance
      ctx.rotate(currentDeg  * Math.PI / 180)
      ctx.drawImage(path, -width / 2, -height / 2, width, height)
      ctx.draw()
      setTimeout(_rotate, 16.7)
    }, 16.7)

为了实现图片旋转,代码如上,参考了官方小程序示例,没有重复调用clearRect,大概就是隔16.7ms (为了达到60帧)调整一下角度绘制一次图片,模拟器上非常流畅,但真机上明显卡顿、帧数不够;Android 比iPhone 好一点,但最奇怪的是一部iPhone 5居然完全正常。目前的动画流畅性依次是:开发者工具 > iPhone 5(iOS 9)> Android > iPhone 6(iOS 10)。


PS:即使是官方小程序示例的canvas 动画,也有点卡顿的感觉。

回答关注问题邀请回答
收藏

4 个回答

  • 成千
    成千
    2022-01-28

    M

    2022-01-28
    有用
    回复
  • 傷
    2020-05-12

    @官方说句话啊

    2020-05-12
    有用
    回复
  • 木偶
    木偶
    2019-02-16

    卡得一比

    2019-02-16
    有用
    回复
  • jyj
    jyj
    2018-05-10

    真的很卡

    2018-05-10
    有用
    回复
登录 后发表内容