Как рассчитать FPS при использовании анимации javascript? Я знаю количество кадров для данного спрайта, которые я хочу воспроизвести с заданной c fps. Для сравнения я добавил canvid в jsfiddle, который воспроизводит правильный fps. Я пытаюсь имитировать c его, используя функцию анимации javascript.
Однако javascript использует Duration (миллисекунды) по сравнению с fps. Вы увидите два файла для тестирования вверху. Один составляет 60 кадров, а другой - 27 кадров.
Помощь приветствуется.
https://jsfiddle.net/JokerMartini/ayf638ro/
var src = 'https://i.ibb.co/cYYYB4s/Air-Explosion-7-2455-2-K-filmstrip.jpg'; // 60
src = 'https://i.ibb.co/vsFWJ88/Explosion-Ground-60fps-01-filmstrip.jpg'; // 27
frames = 27;
fps = 30
var canvidControl = canvid({
selector : '.video',
videos: {
clip1: { src: src, frames: frames, cols: frames, fps:fps, onEnd: function(){
console.log('clip1 ended.');
}},
},
width: 320,
height: 180,
loaded: function() {
canvidControl.play('clip1');
}
});
function addAnimatedSprite(filepath) {
let img = new Image();
img.src = filepath
let width = img.width
let steps = width / 320.0
if (steps == 0) {
return
}
let offset = width * -1
// create div and set image
let html = `<div class="spriteBase"></div>`;
let doc = new DOMParser().parseFromString(html, 'text/html');
let div = doc.body.firstChild;
let timeline = div.firstChild;
div.style.width = 320;
div.style.height = 180;
div.style.backgroundImage = `url('${filepath}')`;
document.getElementById("sprite").append(div);
// add animation for sprite
var keyframes = [{
backgroundPosition: '0px',
}, {
backgroundPosition: `${offset}px`,
}];
// convert fps to milliseconds
let duration = frames * fps;
// timing
let timing = {
duration: duration,
easing: `steps(${steps})`,
iterations: Infinity
}
div.animate(keyframes, timing);
}
addAnimatedSprite(src)