Правильный способ пользователя requestAnimationFrame «внутри» requestAnimationFrame - PullRequest
Новая
       29

Правильный способ пользователя requestAnimationFrame «внутри» requestAnimationFrame

0 голосов
/ 30 мая 2018

Я использую JavaScript с requestAnimationFrame для анимации игры.

Однако внутри основного requestAnimationFrame есть ситуация, когда выполняется 'IF', и я хотел бы сделатьанимация в течение X секунд, если это 'IF' истинно ...

Идея состоит в том, чтобы сделать эту вторую анимацию с другой requestAnimationFrame, как показано выше для справки: 

var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
count = 0;
enteredHere = false;

var main = function(now){

setTimeout(function () {
    context.clearRect(0, 0, canvas.width, canvas.height);
    
		var nowSeconds = Math.floor(now)/1000;
    count++;

		context.beginPath();
    context.fillStyle = "#f00";
    context.font = "20px arial";
    //context.fillText(count, 10, 30);
    context.fillRect(10,30,count, 10);

		nowSeconds = parseInt(Math.floor(now)/1000);
    if(nowSeconds % 5 == 0){
    	if(!enteredHere){
      	enteredHere = true;
    		doSomething();
      }
    }   
    requestAnimationFrame(main);
  }, 1000 / 60);  
};

var doSomething = function(){    
		context.beginPath();
    context.fillStyle = "#f00";
    context.font = "20px calibri";
    context.fillText('DoSomething', 10, 70);
	
    requestAnimation = requestAnimationFrame(doSomething);

		setTimeout(function(){
    	cancelAnimationFrame(requestAnimation);
      enteredHere = false;
    },2000);
};

main();
<canvas width="800" height="600"></canvas>

Как вы можете видеть, когда происходит вторая анимация, первая (растущая fillRect) замедляется и когда она заканчивается (2 секунды)первые приходят в норму.

Может кто-нибудь объяснить, почему первый requestAnimationFrame замедляется, когда происходит второе?

Каков наилучший способ сделать это?

Спасибо.

...