Why is my cancelAnimationFrame() not working in Javascript?

Asked

Viewed 35 times

0

window.onload = function(){
class Objeto{
  constructor(){
    this.x = 10;
    this.y = 10;
    this.velY = 2;
  }
  dObjeto(){
    ctx.beginPath();
    ctx.rect(10,this.y,100,100);
    ctx.closePath();
    ctx.fill();
  }

  stop(){
    cancelAnimationFrame(id);
  }
  anima(){
    ctx.clearRect(0,0,canvas.width, canvas.height);
    objeto.y += objeto.velY;
    objeto.dObjeto();
    //Eu queria que quando alcançasse o valor máximo ele parace com o método stop()
    if(objeto.y + objeto.velY > canvas.height || objeto.y + objeto.velY < 0){
      objeto.velY = -objeto.velY;
      objeto.stop();
    }
    id = requestAnimationFrame(objeto.anima);
  }
}

//Eventos
//Função para mecher na dimenssão da canvas
function canvasT(){
  canvas.width = 700;
  canvas.height = 450;
  canvas.style.border = 'solid';
}
canvasT();
var id;
var ctx = document.getElementById('canvas').getContext('2d');
var objeto = new Objeto();
objeto.dObjeto();
objeto.anima();
window.addEventListener('keydown', objeto.pula, false);
//So funciona a cancelAnimationFrame() se eu apertar o click evento abaixo
window.addEventListener('click', objeto.stop, false);
}
javascript

1 answer

2


Put a return; after calling objeto.stop(); within the anima(), otherwise the code will continue on the next line id = requestAnimationFrame(objeto.anima); that continues the animation:

window.onload = function(){
class Objeto{
  constructor(){
    this.x = 10;
    this.y = 10;
    this.velY = 2;
  }
  dObjeto(){
    ctx.beginPath();
    ctx.rect(10,this.y,100,100);
    ctx.closePath();
    ctx.fill();
  }

  stop(){
    cancelAnimationFrame(id);
  }
  anima(){
    ctx.clearRect(0,0,canvas.width, canvas.height);
    objeto.y += objeto.velY;
    objeto.dObjeto();
    //Eu queria que quando alcançasse o valor máximo ele parace com o método stop()
    if(objeto.y + objeto.velY > canvas.height || objeto.y + objeto.velY < 0){
      objeto.velY = -objeto.velY;
      objeto.stop();
      console.log("PAROU!");
      return;
    }
    id = requestAnimationFrame(objeto.anima);
  }
}

//Eventos
//Função para mecher na dimenssão da canvas
function canvasT(){
  canvas.width = 700;
  canvas.height = 450;
  canvas.style.border = 'solid';
}
canvasT();
var id;
var ctx = document.getElementById('canvas').getContext('2d');
var objeto = new Objeto();
objeto.dObjeto();
objeto.anima();
window.addEventListener('keydown', objeto.pula, false);
//So funciona a cancelAnimationFrame() se eu apertar o click evento abaixo
window.addEventListener('click', objeto.stop, false);
}
<canvas id="canvas"></canvas>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.