1

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!

https://stackoverflow.com/questions/52508261/do-we-need-to-clear-a-timeout-when-using-requestanimationframe-polyfill

0

1 Resposta 1

1

Primeiro você precisa entender o que o seu segundo exemplo, o mais simples, faz, aí você vai entender que o primeiro exemplo não faz sentido. Depois de ler minha resposta, sugiro que releia o artigo que você linkou na MDN, inteiro. Se o problema for o inglês, tem uma versão em português também.

Quando você chama requestAnimationFrame e passa um callback, você está pedindo para o browser executar esse callback logo antes da próxima operação de repaint, que é quando ele (re)desenha o conteúdo da página na tela. A execução do callback é uma operação assíncrona; não ocorre no momento da chamada de requestAnimationFrame, e sim mais tarde (a critério do "fôlego" do browser).

Cada chamada do seu callback corresponde a um único frame da animação, o "frame atual". E o próprio callback agenda a próxima chamada do callback – o processamento do "próximo frame" – chamando novamente requestAnimationFrame e passando a si mesmo. Se o "frame atual" é quem agenda a execução do "próximo frame", é consequência lógica o "frame atual" só foi processado porque foi agendado durante o processamento do "frame anterior".

Agora vejamos o que você perguntou:

Minha dúvida é se está correto chamar o cancelAnimationFrame para o frame anterior caso tenha atraso, ou [se] não é necessário (...)

Percebe que isso não faz sentido? Na hora que você quer chamar cancelAnimationFrame, já é tarde demais, o "frame anterior" – mais precisamente, a execução anterior do seu callback – já terminou, você não tem como cancelar mais nada. O cancelAnimationFrame não serve para resolver questões de performance, serve para interromper o loop de animação, desagendando a próxima execução agendada.

Eu entendi que você está explorando soluções de performance. O problema é que não existe resposta única, abstrata, "esse jeito é sempre melhor e pronto". Depende do que você está fazendo, mais precisamente no que é feito nas partes do seu código que calculam o estado da animação, e nas que propriamente desenham o frame. O artigo que você linkou mostra algumas maneiras de se lidar com isso – e nenhuma delas usa cancelAnimationFrame.

1
  • Certo, talvez tenha me confundido nas leituras e com método de polyfill, e realmente não vi sendo usado a função cancelAnimationFrame. Obrigado!
    – user78859
    Commented 5/03/2019 às 15:36

Você deve fazer log-in para responder a esta pergunta.