Tenho trabalhado com animação e estudando e lendo bastante achei esse método com a melhor performance entre outros existente, tanto para uso no computador quanto para Smartfones, abusurdamente eficiente.
Minha duvida é se esta correto chamar o cancelAnimationFrame para o frame anterior caso tenha atraso ou não é necessário colocar esta linha de cancelamento e por que?
Explicando a lógica:
/* CRIO VARIAVEL
raf: int, valor do id do raf antigo/atual executando */
/* CRIO VARIAVEL
tempo: float, armazena o valor do DOMHighResTimeStamp que e temporizado a cada raf executado, valores flutuantes podem representar microssegundos/miilesegundos dependendo do navegador, esse valor deve ser usado com o tempo atual para as comparacoes do scorpo e tempo de execusao */
/* Funcao: fc_loop_infinito_raf (arg) Descricao: Loop infinito com requestAnimationFrame com gestao do id e tempo do frame anterior/atual, deleto o frame antigo caso encontre atraso e executa o frame atual para tentar manter a performance Criacao: 20/1/2019 Atualizada: 3/3/2019
https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
requestAnimationFrame: funcao, metodo informa ao navegador que voce deseja executar uma animação e solicita que o navegador chame uma funcao especificada para atualizar uma animação antes da proxima repintura. O método recebe um retorno de chamada como um argumento a ser chamado antes da repintura.
arg: de "function fc_loop_infinito_raf (arg), e agora um DOMHighResTimeStamp fornecido pelo raf
https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp
logica e pratica retirada de:
https://developer.mozilla.org/en-US/docs/Games/Anatomy */
;{
let
raf = 0,
tempo = 0,
fc_loop_infinito_raf = function (arg) {
// CONDICAO CANCELA OS FRAMES ANTIGOS
if (arg > tempo) {
console.log ('CANCELO RAF '+ raf);
// CANCELA O FRAME ANTERIOR CASO TENHA OCORRIDO ATRASO
window.cancelAnimationFrame (raf);
}
raf = window.requestAnimationFrame (fc_loop_infinito_raf);
tempo = (arg !== undefined ? arg : 0);
// FUNCAO DE ATUALIZACAO
// FUNCAO DESENHA
console.log ('EXECUTA RAF '+ raf +' - '+ tempo);
};
// INICIO CICLO DO RAF
fc_loop_infinito_raf ();
}
ou assim seria o correto? (caso sim, por que?)
;{
let
raf = 0,
tempo = 0,
fc_loop_infinito_raf = function (arg) {
raf = window.requestAnimationFrame (fc_loop_infinito_raf);
tempo = (arg !== undefined ? arg : 0);
// FUNCAO DE ATUALIZACAO
// FUNCAO DESENHA
console.log ('EXECUTA RAF '+ raf +' - '+ tempo);
};
// INICIO CICLO DO RAF
fc_loop_infinito_raf ();
}
Existe essa pergunta parecida no stack inglês porem sem resposta!