Не могу понять, как исправить мигание анимации((
Сама картинка подобрана не с большим количеством кадров, но вроде как дело не в этом.
const canvas = document.getElementById('field');
let ctx = canvas.getContext('2d');
let sx = 0,
tick_count = 0;
let sprite = new Image();
sprite.src = 'https://ratnotes.files.wordpress.com/2013/01/animal-2a.png';
sprite.onload = function() {
tick();
requestAnimationFrame(tick); //вызов анимации
};
function tick() {
if (tick_count > 10) {
drawCat();
tick_count = 0;
}
tick_count += 1;
requestAnimationFrame(tick);
}
function drawCat() {
ctx.clearRect(0, 0, canvas.width, canvas.height); //очистка канваса
sx = (sx === 384 ? 0 : sx + 96); //переброс в начало, если спрайт закончился 384 - width картинки, 384/4 =96 -шаг, на который сдвигаем
ctx.drawImage(sprite, sx, 0, 96, 96, 100, 100, 96, 96); //отображение первого спрайта
}
<canvas id="field" width="900" height="400">hi</canvas>