收藏
回答

canvas 动画在真机上比较卡

问题模块
API和组件
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 动画,也有点卡顿的感觉。

最后一次编辑于  2017-07-31  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

2 个回答

  • 木偶
    木偶
    02-16

    卡得一比

    02-16
    赞同
    回复
  • jyj
    jyj
    2018-05-10

    真的很卡

    2018-05-10
    赞同
    回复