холст или requestAnimationFrame медленно в мобильном

У меня проблема в мобильных браузерах. я цветовой холста диаграмма а без библиотеки JS или рамок, но его анимация очень и очень медленно в мобильномхолст или requestAnimationFrame медленно в мобильном

Я использую эту функцию для requestAnimationFrame:

(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); 
})

Что я должен делать?

источник

2016-03-17 peyman azizi

Это медленный, потому что холст медленный, 'requestAnimationFrame' имеет мало/ничего общего с ним – dandavis

Спасибо за ваш ответ, но я вижу, что mr.doob работает на моем мобильном телефоне, и они очень гладкие, почему бы и нет моей диаграммы ? :( –

Mr. doob использует webgl с three.js, я уверен, что вы этого не сделали. WebGL будет на порядок быстрее, чем манипуляции с исходными пикселями. –

Прежде всего, вы не разместили соответствующий код. Как вы рисуете на холсте, это, безусловно, ваша проблема. Есть несколько советов, которые помогут сделать это лучше:

Нанесите на экранный холст и скопируйте данные изображения сразу.
Объедините вышеуказанное с несколькими холстами, только рисуйте слои, которые изменились, например. ваш слой графика может измениться, но не метки/легенда.
Нарисуйте небольшой холст и увеличьте его.

Чтобы быть честным, мобильные браузеры дороги, медленнее, чем их настольные аналоги по разным причинам (тепло и энергопотребление - два довольно больших). Если вам нужна гладкая анимация, вам придется либо написать высокоэффективный код рендеринга (вероятно, в WebGL), либо использовать кого-то elses (например, pixi.js).

источник

2016-06-23 14:02:38

холст или requestAnimationFrame медленно в мобильном

ответ

Смежные вопросы