canvas 或 requestAnimationFrame 在移动设备中很慢

canvas or requestAnimationFrame is slow in mobile

本文关键字：移动 requestAnimationFrame canvas      更新时间：2023-09-26

我在移动浏览器中遇到问题。我制作了一个没有任何js库或框架的画布图表，但它的动画在移动设备上非常非常慢

我将这个函数用于请求动画框架：

(function () {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) window.requestAnimationFrame = function (callback, element) {
    var currTime = new Date().getTime();
    var timeToCall = Math.max(0, 16 - (currTime - lastTime));
    var id = window.setTimeout(function () {
            callback(currTime + timeToCall);
        },
        timeToCall);
    lastTime = currTime + timeToCall;
    return id;
};
if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function (id) {
    clearTimeout(id);
};
}());
requestAnimationFrame(myFunc);
function myFunc(){
    //any code
    .
    .
    requestAnimationFrame(myFunc);
})

我该怎么办？

首先，您没有发布相关代码。你如何在画布上绘画几乎可以肯定是你的问题。有一些技巧可以使其更好：

  • 绘制到屏幕外画布并一次复制所有图像数据。
  • 将上述内容与多个画布相结合，仅绘制已更改的图层，例如，图形图层可能已更改，但标签/图例未更改。
  • 绘制到较小的画布并将其放大。

老实说，由于各种原因（热量和功耗是两个相当大的原因），移动浏览器比桌面浏览器慢得多。如果你想要流畅的动画，你必须编写一些高性能的渲染代码（可能在WebGL中）或使用其他人（例如pixi.js）。

相关文章：