В JavaScript вы можете использовать функции setInterval и setTimeout, чтобы создавать задержки и регулировать частоту кадров.
например, если вы хотите сделать цикл рисования примерно 30 FPS, у вас может быть код, который выглядит следующим образом:
function draw(){
var canvas = document.getElementById('myCanvas');
//create the image object
var img = new Image();
//set the image object's image file path
var img.src = "images/myImage.png"
//check to see that our canvas exists
if( canvas.getContext )
{
//grab the context to draw to.
var ctx = cvs.getContext('2d');
//clear the screen to a white background first
//NOTE to make this faster you can clear just the parts
//of the canvas that are moving instead of the whole thing
//every time. Check out 'Improving HTML5 Canvas Performance'
//link mention in other post
ctx.fillStyle="rgb(255,255,255)";
ctx.fillRect (0, 0,512, 512);
//DO ALL YOUR DRAWING HERE....
//draw animation
ctx.drawImage(img, 0, 0);
}
//Recalls this draw update 30 times per second
setTimeout(draw,1000/30);
}
Это поможет вам контролировать время обработки анимации. Таким образом, если вы обнаружите, что ваша анимация идет слишком медленно, вы можете увеличить частоту кадров, изменив знаменатель «30» на что-то вроде «60» кадров в секунду или что-нибудь, что действительно хорошо работает для вашей программы.
Поскольку оптимизация идет в дополнение к setTimeout (), то способ рисования анимации также имеет решающее значение. Попробуйте загрузить все ваши изображения, прежде чем вы их отрендерите, это называется «Предварительная загрузка». То есть, если у вас есть куча разных изображений для каждой анимированной ячейки, то перед вызовом функции рисования загрузите все изображения в массив изображений следующим образом:
var loadedImages = new Array();
loadedImages[0] = new Image();
loadedImages[0].src = "images/animationFrame1.png";
loadedImages[1] = new Image();
loadedImages[1].src = "images/animationFrame2.png";
loadedImages[2] = new Image();
loadedImages[2].src = "images/animationFrame3.png";
loadedImages[3] = new Image();
loadedImages[3].src = "images/animationFrame4.png";
вы можете даже поместить их в хеш, если это имеет смысл для вашего приложения, где вместо
loadedImages[0] = new Image();
loadedImages[0].src = "images/animationFrame1.png";
вы делаете это
loadedImages['frame1'] = new Image();
loadedImages['frame1'].src = "images/animationFrame1.png";
как только вы загрузите все свои изображения, вы обращаетесь к ним для рисования, называя их так:
//Using the integer array
ctx.drawImage(loadedImages[0], 0, 0);
//OR
//Using the stringed hash
ctx.drawImage(loadedImages['frame1'], 0, 0);
Вы хотите отделить процесс загрузки от процесса рендеринга, потому что загрузка изображений является интенсивным процессом, поэтому замедлит анимацию, если вы загружаете вещи во время рендеринга.
Это не означает, что вы ничего не можете загрузить во время рендеринга, но просто имейте в виду, что это замедлит анимацию.
Здесь - статья о предварительной загрузке изображений.
Здесь есть еще один пост, в котором говорится о постоянной скорости анимации во всех браузерах здесь
Обратите внимание на ссылку , отправленную зеленым отмеченным ответом
Следует также отметить, что необходимо очистить и перерисовать только ограничивающие рамки, как упомянуто в посте, с оптимизацией холста HTML 5. У этой ссылки есть несколько действительно хороших техник, о которых следует помнить при разработке анимации холста.
Здесь также есть некоторые рамки, которые могут пригодиться для сравнения того, что вы делаете с тем, что делают другие двигатели.
Надеюсь, что это поможет. Я новичок в javascript (только начал кодировать его около 2 недель назад), и поэтому могут быть лучшие способы сделать что-то, но это то, что я нашел до сих пор.