Рассчитать FPS для Javascript длительности с известными кадрами - PullRequest
0 голосов
/ 07 мая 2020

Как рассчитать 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)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...